/* ==========================================================================
   Creation Center brand layer for Bootstrap 5.3.8
   Loaded after bootstrap.min.css. Everything here either retunes a Bootstrap
   variable or adds a component Bootstrap does not have. Nothing re-implements
   something the framework already does.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand tokens, then Bootstrap's own variables pointed at them
   -------------------------------------------------------------------------- */

:root {
  /* palette */
  --cc-ink:        #241C2B;
  --cc-ink-2:      #4A3F55;
  /* The muted grey. Was #7A6E86, which measures 4.62:1 on white and so looked
     fine, but it is used mostly on tinted grounds (grey badges, sand panels,
     table headers) where it fell to 3.99:1. Darkened just enough to clear
     4.5:1 there too, without collapsing the step down from --cc-ink-2. */
  --cc-ink-3:      #6E6279;
  --cc-plum:       #4B2E5E;
  --cc-plum-deep:  #2E1B3A;
  --cc-plum-soft:  #F3EDF7;
  --cc-gold:       #C08A1E;
  --cc-gold-2:     #E8B84B;
  --cc-gold-soft:  #FDF4E0;
  /* The brand gold reaches only 3.0:1 on the near-white header, which is below
     the 4.5:1 needed for normal text. It stays as-is for button fills, rules and
     anything decorative, where contrast is not read as text. Gold *text* on a
     light ground uses this darker mix instead, which measures 5.4:1 and still
     reads as the same colour. */
  --cc-gold-ink:   #8A6111;
  /* Darkened from #4F7A72: as badge text on the soft sage ground it measured
     4.23:1, just under AA. */
  --cc-sage:       #40665E;
  --cc-sage-soft:  #EAF2F0;
  --cc-sand:       #FBF7F1;
  --cc-cream:      #FFFDFA;
  --cc-line:       #E7DED0;
  --cc-line-2:     #F1EAE0;
  --cc-danger:     #A8342B;
  --cc-danger-soft:#FBEDEB;
  --cc-ok:         #2F6B4F;
  --cc-ok-soft:    #EAF4EE;

  --cc-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --cc-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --cc-shadow-1: 0 1px 2px rgba(36,28,43,.06), 0 2px 8px rgba(36,28,43,.05);
  --cc-shadow-2: 0 2px 6px rgba(36,28,43,.07), 0 12px 32px rgba(36,28,43,.09);
  --cc-shadow-3: 0 4px 12px rgba(36,28,43,.09), 0 24px 64px rgba(36,28,43,.14);

  /* ---- Bootstrap overrides ---- */
  --bs-primary: #4B2E5E;
  --bs-primary-rgb: 75, 46, 94;
  --bs-secondary: #7A6E86;
  --bs-success: #2F6B4F;
  --bs-danger: #A8342B;
  --bs-warning: #C08A1E;
  --bs-info: #4F7A72;

  --bs-body-color: #4A3F55;
  --bs-body-color-rgb: 74, 63, 85;
  --bs-body-bg: #FFFDFA;
  --bs-body-bg-rgb: 255, 253, 250;
  --bs-emphasis-color: #241C2B;
  --bs-secondary-color: rgba(74, 63, 85, .72);

  --bs-body-font-family: var(--cc-sans);
  --bs-body-font-size: 1.0625rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.65;

  --bs-border-color: #E7DED0;
  --bs-border-color-translucent: rgba(36, 28, 43, .1);
  --bs-border-radius: .75rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-border-radius-xl: 1.5rem;
  --bs-border-radius-pill: 50rem;

  --bs-link-color: #4B2E5E;
  --bs-link-color-rgb: 75, 46, 94;
  --bs-link-hover-color: #C08A1E;
  --bs-link-hover-color-rgb: 192, 138, 30;
  --bs-link-underline-opacity: .35;

  --bs-heading-color: #241C2B;
  --bs-focus-ring-color: rgba(75, 46, 94, .3);
  --bs-focus-ring-width: .2rem;

  --bs-tertiary-bg: #FBF7F1;
  --bs-secondary-bg: #F1EAE0;
}

/* --------------------------------------------------------------------------
   1b. Aliases for booking.css and admin.css
   Those two stylesheets carry genuinely bespoke components (the availability
   grid, the booking calendar, the page builder) that Bootstrap has no
   equivalent for, so they are kept as-is and fed the same tokens under their
   original names rather than being rewritten for the sake of it.
   -------------------------------------------------------------------------- */

:root {
  --ink: var(--cc-ink);
  --ink-2: var(--cc-ink-2);
  --ink-3: var(--cc-ink-3);
  --plum: var(--cc-plum);
  --plum-deep: var(--cc-plum-deep);
  --plum-soft: var(--cc-plum-soft);
  --gold: var(--cc-gold);
  --gold-2: var(--cc-gold-2);
  --gold-ink: var(--cc-gold-ink);
  --gold-soft: var(--cc-gold-soft);
  --sage: var(--cc-sage);
  --sage-soft: var(--cc-sage-soft);
  --sand: var(--cc-sand);
  --cream: var(--cc-cream);
  --white: #fff;
  --line: var(--cc-line);
  --line-2: var(--cc-line-2);
  --danger: var(--cc-danger);
  --danger-soft: var(--cc-danger-soft);
  --ok: var(--cc-ok);
  --ok-soft: var(--cc-ok-soft);
  --serif: var(--cc-serif);
  --sans: var(--cc-sans);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --r-sm: .375rem;
  --r: .75rem;
  --r-lg: 1.25rem;
  --r-pill: 50rem;
  --sh-1: var(--cc-shadow-1);
  --sh-2: var(--cc-shadow-2);
  --sh-3: var(--cc-shadow-3);
  --header-h: 76px;
}

/* The booking module and the admin console keep their own small component
   vocabulary, because they are bespoke tools rather than marketing pages.
   These are the pieces they rely on. Note `.cc-row`: Bootstrap owns `.row`
   now, so the legacy flex helper was renamed rather than left to collide. */

.cc-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.spread { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.center { text-align: center; }
.muted { color: var(--cc-ink-3); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }

.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .68rem; border-radius: 50rem;
  font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  background: var(--cc-plum-soft); color: var(--cc-plum);
}
.pill-gold { background: var(--cc-gold-soft); color: #8A6410; }
.pill-sage { background: var(--cc-sage-soft); color: var(--cc-sage); }
.pill-ok   { background: var(--cc-ok-soft); color: var(--cc-ok); }
.pill-warn { background: var(--cc-danger-soft); color: var(--cc-danger); }
.pill-grey { background: var(--cc-line-2); color: var(--cc-ink-3); }

.callout {
  padding: 1.15rem 1.4rem; border-radius: .75rem;
  background: var(--cc-gold-soft); border: 1px solid #EFE0BE;
  font-size: .95rem; color: #6B4E10;
}
.callout.info { background: var(--cc-sage-soft); border-color: #CDE0DB; color: #325B54; }
.callout.plum { background: var(--cc-plum-soft); border-color: #E2D5EC; color: var(--cc-plum); }

.field { margin-bottom: 1.1rem; }
.field label, .lbl { display: block; margin-bottom: .38rem; font-size: .82rem; font-weight: 600; color: var(--cc-ink); }
.field .hint, .hint { font-size: .78rem; color: var(--cc-ink-3); margin-top: .35rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.check input { margin-top: .25rem; accent-color: var(--cc-plum); width: 16px; height: 16px; flex: none; }

/* --------------------------------------------------------------------------
   Forms

   The old build styled fields through `.field label` and bare element selectors.
   The Bootstrap pass renamed `.field` to `.mb-3`, which orphaned that rule and
   left labels sitting inline beside inputs that had no width. Every control now
   carries its Bootstrap class; the bare-element rules below are the safety net,
   so a field built at runtime without a class still comes out right.
   -------------------------------------------------------------------------- */

.form-label { margin-bottom: .4rem; font-size: .82rem; font-weight: 600; color: var(--cc-ink); letter-spacing: .01em; }

.form-control, .form-select {
  --bs-border-color: var(--cc-line);
  padding: .7rem .9rem;
  font-size: .95rem;
  border-radius: .7rem;
  background-color: #fff;
  color: var(--cc-ink);
  transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: var(--cc-ink-3); opacity: 1; }
.form-control:focus, .form-select:focus {
  border-color: var(--cc-plum);
  box-shadow: 0 0 0 3px var(--cc-plum-soft);
}
.form-control:disabled, .form-select:disabled { background-color: var(--cc-sand); color: var(--cc-ink-3); }
textarea.form-control { min-height: 8rem; line-height: 1.6; resize: vertical; }

.form-check-input { accent-color: var(--cc-plum); border-color: var(--cc-line); }
.form-check-input:checked { background-color: var(--cc-plum); border-color: var(--cc-plum); }
.form-check-input:focus { border-color: var(--cc-plum); box-shadow: 0 0 0 3px var(--cc-plum-soft); }
.form-check-label, .form-check span { font-size: .9rem; color: var(--cc-ink-2); }

/* Safety net for controls generated without a class */
form label:not([class]), .card label:not([class]) {
  display: block; margin-bottom: .4rem;
  font-size: .82rem; font-weight: 600; color: var(--cc-ink);
}
form input:not([class]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
form select:not([class]), form textarea:not([class]) {
  display: block; width: 100%;
  padding: .7rem .9rem; font-size: .95rem; font-family: inherit;
  border: 1px solid var(--cc-line); border-radius: .7rem; background: #fff; color: var(--cc-ink);
}

/* A form laid out on a grid: two columns on desktop, one on a phone, and any
   field marked wide spans the row. Replaces the ad-hoc inline widths that made
   the contact and apply forms look unfinished. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.form-grid .wide { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.table-wrap { overflow-x: auto; border: 1px solid var(--cc-line); border-radius: .75rem; background: #fff; }

@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

/* helpers the conversion introduced */
.breadcrumb-lite a { color: var(--cc-ink-3); text-decoration: none; }
.breadcrumb-lite a:hover { color: var(--cc-plum); }

.empty-state {
  text-align: center; padding: 3.5rem 1.5rem;
  border: 1.5px dashed var(--cc-line); border-radius: 1.25rem; background: var(--cc-sand);
}
.empty-state .icon { font-size: 2.2rem; margin-bottom: .75rem; opacity: .8; }

/* --------------------------------------------------------------------------
   2. Base typography
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--cc-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--cc-sans);
  font-weight: 650;
  letter-spacing: -.005em;
}
h1, .h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
h2, .h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3, .h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
h4, .h4 { font-size: 1.15rem; }

.display-serif { font-family: var(--cc-serif); font-weight: 600; }

.eyebrow {
  display: block;
  font-family: var(--cc-sans);
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cc-gold-ink);
  margin-bottom: .9rem;
}
.eyebrow.on-dark { color: var(--cc-gold-2); }

.lede { font-size: 1.16rem; line-height: 1.6; color: var(--cc-ink-2); }
.num { font-variant-numeric: tabular-nums; }

/* container capped to the design width rather than Bootstrap's 1320 */
.container, .container-lg, .container-xl, .container-xxl { max-width: 1180px; }
.container-narrow { max-width: 760px; margin-inline: auto; }

/* section rhythm */
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section-tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.bg-sand { background: var(--cc-sand) !important; }
.bg-cream { background: var(--cc-cream) !important; }
.bg-gold-soft { background: var(--cc-gold-soft) !important; }
.bg-plum { background: var(--cc-plum-deep) !important; color: #D9CFE2; }
.bg-plum h1, .bg-plum h2, .bg-plum h3, .bg-plum h4 { color: #fff; }
.bg-plum .lede { color: #D9CFE2; }

.sec-head { max-width: 640px; margin-bottom: 2.75rem; }
.sec-head.text-center { margin-inline: auto; }

.hr-rule { height: 1px; background: var(--cc-line); border: 0; margin-block: 3rem; opacity: 1; }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --bs-btn-font-family: var(--cc-sans);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: .93rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: .78rem;
  --bs-btn-border-radius: 50rem;
  --bs-btn-border-width: 1.5px;
  transition: transform .14s, box-shadow .14s, background-color .14s, color .14s, border-color .14s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.btn-primary {
  --bs-btn-bg: var(--cc-plum);
  --bs-btn-border-color: var(--cc-plum);
  --bs-btn-hover-bg: var(--cc-plum-deep);
  --bs-btn-hover-border-color: var(--cc-plum-deep);
  --bs-btn-active-bg: var(--cc-plum-deep);
  --bs-btn-active-border-color: var(--cc-plum-deep);
  --bs-btn-disabled-bg: var(--cc-plum);
  --bs-btn-disabled-border-color: var(--cc-plum);
  box-shadow: var(--cc-shadow-1);
}

.btn-gold {
  --bs-btn-color: #3A2705;
  --bs-btn-bg: var(--cc-gold-2);
  --bs-btn-border-color: var(--cc-gold-2);
  --bs-btn-hover-color: #3A2705;
  --bs-btn-hover-bg: #EFC868;
  --bs-btn-hover-border-color: #EFC868;
  --bs-btn-active-color: #3A2705;
  --bs-btn-active-bg: var(--cc-gold);
  --bs-btn-active-border-color: var(--cc-gold);
  --bs-btn-disabled-color: #3A2705;
  --bs-btn-disabled-bg: var(--cc-gold-2);
  --bs-btn-disabled-border-color: var(--cc-gold-2);
  background-image: linear-gradient(180deg, var(--cc-gold-2), var(--cc-gold));
  box-shadow: var(--cc-shadow-1);
}
.btn-gold:hover { box-shadow: var(--cc-shadow-2); }

.btn-outline-brand {
  --bs-btn-color: var(--cc-ink-2);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--cc-line);
  --bs-btn-hover-color: var(--cc-plum);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--cc-plum);
  --bs-btn-active-color: var(--cc-plum);
  --bs-btn-active-bg: var(--cc-plum-soft);
  --bs-btn-active-border-color: var(--cc-plum);
}
.btn-outline-light-brand {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255,255,255,.35);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255,255,255,.1);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255,255,255,.16);
}
.btn-sm { --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .5rem; --bs-btn-font-size: .84rem; }
.btn-lg { --bs-btn-padding-x: 2rem; --bs-btn-padding-y: 1rem; --bs-btn-font-size: 1rem; }

.link-arrow {
  font-weight: 600; font-size: .93rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem; color: var(--cc-plum);
}
.link-arrow::after { content: "\2192"; transition: transform .15s; }
.link-arrow:hover { color: var(--cc-gold-ink); }
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. Cards
   -------------------------------------------------------------------------- */

.card {
  --bs-card-border-color: var(--cc-line);
  --bs-card-border-radius: 1.25rem;
  --bs-card-inner-border-radius: 1.15rem;
  --bs-card-bg: #fff;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-spacer-y: 1.35rem;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--cc-shadow-2); border-color: #DCCFBB; }

/* Equal height, everywhere, without depending on every card carrying .h-100.

   Two different cases, and they need opposite treatment:

   1. Card wrapped in a grid column. The column is a flex item and stretches to
      the tallest in its line, so the column already has the right height and the
      card fills it with a percentage.
   2. Card sitting directly in the row, with no column wrapper. Here the card IS
      the flex item, and `align-self: stretch` already sizes it — but stretch only
      applies while the cross size is `auto`. Setting `height: 100%` makes it
      non-auto and switches stretch off, which is the opposite of what we want.
      So this case gets stretch, never a height. */
.row > [class*="col"] > .card,
.row > [class*="col"] > article.card { height: 100%; }
.row > .card { align-self: stretch; }

/* Scoped with :has so only columns that actually hold a card become flex columns.
   Turning every column into a flex container would change layout site-wide for
   columns full of prose, forms and images, which is not what this is for. */
.row > [class*="col"]:has(> .card) { display: flex; flex-direction: column; }
.row > [class*="col"]:has(> .card) > .card { flex: 1 1 auto; }

/* The body is a column so .card-foot can sit on the baseline of the tallest
   card rather than floating directly under uneven copy. */
.card > .card-body { display: flex; flex-direction: column; }
.card > .card-body > :last-child { margin-bottom: 0; }

.card-media { position: relative; overflow: hidden; aspect-ratio: 16/10; flex: none; }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-foot { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* The image sits flush in the top of the card, so it has to carry the card's
   own corner radius. Without this the picture keeps square corners inside a
   rounded card and the two fight each other at every top corner. Bootstrap does
   this for .card-img-top; .card-media is ours, so it needs saying. */
.card > .card-media:first-child {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card > .card-media:last-child {
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
}

/* Legacy grid classes. The Bootstrap conversion left `class="container grid g3"`
   in place on six pages but nothing ever defined `.grid` or `.g3`, so those
   sections were rendering as full-width stacked blocks with no gutters at all.
   Defined here as a real grid: items stretch by default, so cards in the same
   row match height without any extra rule. */
.grid { display: grid; gap: 1.75rem; align-items: stretch; }
.grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) {
  .grid.g3, .grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* decorative gradient behind photography, so a slow file leaves a tint not a hole */
.ph { position: absolute; inset: 0; background: linear-gradient(135deg, #E9DDEF, #F6E7C9 55%, #DCE9E6); }
.ph-1 { background: linear-gradient(140deg, #4B2E5E, #8A5FA3 45%, #E8B84B); }
.ph-2 { background: linear-gradient(140deg, #2E1B3A, #4F7A72 60%, #E8B84B); }
.ph-3 { background: linear-gradient(140deg, #C08A1E, #E8B84B 40%, #F3EDF7); }
.ph-4 { background: linear-gradient(140deg, #4F7A72, #A8C4BE 55%, #FDF4E0); }
.ph-5 { background: linear-gradient(140deg, #8A5FA3, #E9DDEF 60%, #FBF7F1); }
.ph-6 { background: linear-gradient(140deg, #2E1B3A, #4B2E5E 50%, #C08A1E); }
.ph::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.45), transparent 45%),
    radial-gradient(circle at 78% 72%, rgba(255,255,255,.25), transparent 40%);
}

.figure-brand { position: relative; overflow: hidden; border-radius: 1.25rem; background: var(--cc-sand); margin: 0; }
.figure-brand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.figure-brand.contain img { object-fit: contain; padding: 8%; }
.figure-brand.on-cream { background: var(--cc-cream); }

.avatar-photo { width: 52px; height: 52px; border-radius: 50%; flex: none; object-fit: cover; }
.avatar-mono {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--cc-plum-soft); color: var(--cc-plum);
  font-family: var(--cc-serif); font-size: 1.15rem; font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Badges, alerts, tables, forms
   -------------------------------------------------------------------------- */

.badge {
  --bs-badge-font-size: .72rem;
  --bs-badge-font-weight: 650;
  --bs-badge-padding-x: .68rem;
  --bs-badge-padding-y: .3rem;
  --bs-badge-border-radius: 50rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.badge-plum  { background: var(--cc-plum-soft); color: var(--cc-plum); }
.badge-gold  { background: var(--cc-gold-soft); color: #8A6410; }
.badge-sage  { background: var(--cc-sage-soft); color: var(--cc-sage); }
.badge-ok    { background: var(--cc-ok-soft); color: var(--cc-ok); }
.badge-warn  { background: var(--cc-danger-soft); color: var(--cc-danger); }
.badge-grey  { background: var(--cc-line-2); color: var(--cc-ink-3); }

.alert { --bs-alert-border-radius: .75rem; border-width: 1px; font-size: .95rem; }
.alert-brand { background: var(--cc-gold-soft); border-color: #EFE0BE; color: #6B4E10; }
.alert-brand-info { background: var(--cc-sage-soft); border-color: #CDE0DB; color: #325B54; }
.alert-brand-plum { background: var(--cc-plum-soft); border-color: #E2D5EC; color: var(--cc-plum); }

.table {
  --bs-table-color: var(--cc-ink-2);
  --bs-table-border-color: var(--cc-line-2);
  --bs-table-hover-bg: #FDFBF7;
  font-size: .9rem;
  margin-bottom: 0;
}
.table > thead th {
  background: var(--cc-sand);
  font-size: .74rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cc-ink-3); border-bottom-color: var(--cc-line); white-space: nowrap;
  padding: .8rem 1rem;
}
.table > tbody td { padding: .85rem 1rem; vertical-align: middle; }
.table-shell { border: 1px solid var(--cc-line); border-radius: .75rem; overflow: hidden; background: #fff; }

.form-control, .form-select {
  --bs-border-width: 1.5px;
  border-color: var(--cc-line);
  border-radius: .375rem;
  padding: .72rem .9rem;
  font-size: .95rem;
  color: var(--cc-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--cc-plum);
  box-shadow: 0 0 0 3px rgba(75,46,94,.12);
}
.form-label { font-size: .82rem; font-weight: 600; color: var(--cc-ink); margin-bottom: .38rem; }
.form-text { font-size: .78rem; color: var(--cc-ink-3); }
.form-check-input:checked { background-color: var(--cc-plum); border-color: var(--cc-plum); }
.form-check-input:focus { border-color: var(--cc-plum); box-shadow: 0 0 0 .2rem rgba(75,46,94,.2); }
.form-switch .form-check-input:checked { background-color: var(--cc-ok); border-color: var(--cc-ok); }

/* --------------------------------------------------------------------------
   6. Navbar, offcanvas menu, footer
   -------------------------------------------------------------------------- */

.site-navbar {
  background: rgba(255,253,250,.93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cc-line-2);
  --bs-navbar-padding-y: 0;
  min-height: 76px;
  /* The header carried no z-index at all, so any sticky element further down
     the page with one of its own painted straight over it. The booking rail
     (z-index 60) did exactly that. Bootstrap's sticky-top level keeps the
     header above page content but below modals and offcanvas. */
  z-index: 1020;
}
.site-navbar .navbar-nav { --bs-nav-link-font-size: .93rem; --bs-nav-link-font-weight: 550; }
.site-navbar .nav-link { color: var(--cc-ink-2); border-radius: .375rem; padding: .55rem .72rem; }
.site-navbar .nav-link:hover, .site-navbar .nav-link:focus,
.site-navbar .nav-item.show > .nav-link { background: var(--cc-plum-soft); color: var(--cc-plum); }
.site-navbar .nav-link.active { color: var(--cc-gold-ink); }

.brand-link { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--cc-gold-2), var(--cc-gold) 62%, #9C6D12);
  display: grid; place-items: center; color: #fff;
  font-family: var(--cc-serif); font-size: 1.15rem; font-weight: 700;
  box-shadow: inset 0 -2px 5px rgba(0,0,0,.18);
}
.brand-name { font-family: var(--cc-serif); font-size: 1.28rem; font-weight: 600; color: var(--cc-ink); line-height: 1.05; }
.brand-name small {
  display: block; font-family: var(--cc-sans); font-size: .58rem;
  letter-spacing: .21em; text-transform: uppercase; color: var(--cc-gold-ink); font-weight: 650;
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--cc-line);
  --bs-dropdown-border-radius: .75rem;
  --bs-dropdown-link-hover-bg: var(--cc-sand);
  --bs-dropdown-link-hover-color: var(--cc-plum);
  --bs-dropdown-link-active-bg: var(--cc-plum-soft);
  --bs-dropdown-link-active-color: var(--cc-plum);
  --bs-dropdown-font-size: .9rem;
  --bs-dropdown-padding-y: .5rem;
  --bs-dropdown-item-padding-x: .7rem;
  --bs-dropdown-item-padding-y: .5rem;
  --bs-dropdown-spacer: .5rem;
  box-shadow: var(--cc-shadow-2);
  min-width: 250px;
}
.dropdown-item { border-radius: .375rem; }
.dropdown-item .tag {
  float: right; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cc-gold-ink); font-weight: 650; padding-top: .2rem;
}

/* desktop hover menus, without losing keyboard and touch behaviour */
@media (min-width: 992px) {
  .site-navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; }
}

.demo-bar { background: var(--cc-ink); color: #E8DFF0; font-size: .78rem; padding: .5rem 0; }
.demo-bar b { color: var(--cc-gold-2); }
.demo-bar a { color: #fff; }

@keyframes cc-bump { 0%,100% { transform: none; } 35% { transform: scale(1.16); } }

.site-footer { background: var(--cc-plum-deep); color: #A899B6; font-size: .92rem; }
.site-footer h4 {
  color: #fff; font-family: var(--cc-sans); font-size: .78rem;
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1rem;
}
.site-footer a { color: #C4B6D0; text-decoration: none; }
.site-footer a:hover { color: var(--cc-gold-2); }
.site-footer .brand-name { color: #fff; }
.site-footer .socials a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: grid; place-items: center; font-size: .72rem; font-weight: 650;
}
.site-footer .socials a:hover { background: var(--cc-gold); color: #3A2705; }
.site-footer .form-control { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; }
.site-footer .form-control::placeholder { color: #A497B2; }
.footer-note { border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; color: #A497B2; }

.skip-link {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(-140%);
  z-index: 1080; background: var(--cc-plum); color: #fff;
  padding: .7rem 1.25rem; border-radius: 0 0 .75rem .75rem;
  font-size: .9rem; font-weight: 600; text-decoration: none; transition: transform .15s;
}
.skip-link:focus { transform: translateX(-50%) translateY(0); color: #fff; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; background: var(--cc-plum-deep); color: #D9CFE2; }
.hero-bg { position: absolute; inset: 0; opacity: .72; }
.hero-bg:has(img) { opacity: .5; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(46,27,58,.94) 8%, rgba(46,27,58,.72) 48%, rgba(46,27,58,.35));
}
.hero-bg:has(img)::after {
  background: linear-gradient(105deg, rgba(46,27,58,.96) 8%, rgba(46,27,58,.88) 45%, rgba(46,27,58,.74));
}
.hero-inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 9vw, 7rem); }
.hero h1 { color: #fff; }

.hero-portrait {
  position: relative; margin: 0; border-radius: 1.25rem; overflow: hidden;
  aspect-ratio: 4/5; box-shadow: 0 24px 70px rgba(0,0,0,.42);
  outline: 1px solid rgba(255,255,255,.14); outline-offset: -1px;
}
.hero-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hero-portrait figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3rem 1.25rem 1.1rem;
  background: linear-gradient(to top, rgba(24,14,32,.9), transparent);
  color: #fff; font-size: .84rem;
}
.hero-portrait figcaption b { display: block; font-family: var(--cc-serif); font-size: 1.2rem; font-weight: 600; }
.hero-portrait figcaption span { color: #C4B6D0; }

.hero-strip { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.12); }
.hero-strip .fact { font-size: .87rem; color: #BFB1CC; }
.hero-strip .fact b {
  display: block; font-family: var(--cc-serif); font-size: 1.5rem;
  color: var(--cc-gold-2); font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Was clamp(2.5rem,5vw,4rem) at the top, which put 64px of empty sand above
   the first line on a desktop page and made every page open on a gap. */
.page-head { background: var(--cc-sand); border-bottom: 1px solid var(--cc-line-2); padding-block: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.4rem); }
.breadcrumb { --bs-breadcrumb-font-size: .82rem; --bs-breadcrumb-divider-color: var(--cc-ink-3); --bs-breadcrumb-item-active-color: var(--cc-ink-3); }
.breadcrumb a { color: var(--cc-ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--cc-plum); }

/* --------------------------------------------------------------------------
   8. Prose
   -------------------------------------------------------------------------- */

/* A checked list for curriculum and inclusion lists. Long bullet runs inside a
   narrow prose column read as an undifferentiated wall; broken into cards with
   these, each item is scannable. */
.tick-list { list-style: none; padding-left: 0; margin: 0; display: grid; gap: .6rem; }
.tick-list li { position: relative; padding-left: 1.6rem; font-size: .92rem; line-height: 1.55; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .72rem; height: .38rem;
  border-left: 2px solid var(--cc-gold); border-bottom: 2px solid var(--cc-gold);
  transform: rotate(-45deg);
}

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.9rem; }
.prose ul, .prose ol { padding-left: 1.15rem; margin-bottom: 1.2em; }
.prose li { margin-bottom: .5em; }
.prose blockquote {
  margin: 2rem 0; padding: 1.4rem 1.75rem;
  border-left: 3px solid var(--cc-gold); background: var(--cc-gold-soft);
  border-radius: 0 .75rem .75rem 0;
  font-family: var(--cc-serif); font-size: 1.3rem; line-height: 1.45; color: var(--cc-ink);
}
.prose blockquote cite {
  display: block; margin-top: .7rem; font-family: var(--cc-sans); font-size: .82rem;
  font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-ink-3);
}

/* --------------------------------------------------------------------------
   9. Accordion and tabs, retuned
   -------------------------------------------------------------------------- */

.accordion {
  --bs-accordion-border-color: var(--cc-line);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(75,46,94,.2);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--cc-ink);
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-bg: transparent;
  --bs-accordion-border-width: 0 0 1px 0;
  --bs-accordion-border-radius: 0;
}
.accordion-button {
  font-family: var(--cc-sans); font-size: 1.02rem; font-weight: 600; color: var(--cc-ink);
  box-shadow: none !important;
}
.accordion-button::after { --bs-accordion-btn-icon-transform: rotate(-180deg); filter: sepia(1) saturate(4) hue-rotate(2deg); }
.accordion-body { font-size: .96rem; }

.nav-tabs {
  --bs-nav-tabs-border-color: var(--cc-line);
  --bs-nav-tabs-link-active-color: var(--cc-plum);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--cc-gold);
  --bs-nav-link-color: var(--cc-ink-3);
  --bs-nav-link-hover-color: var(--cc-plum);
  --bs-nav-tabs-border-width: 2px;
  --bs-nav-link-font-size: .94rem;
  --bs-nav-link-font-weight: 600;
  /* Wrapping beats scrolling here. The previous `nowrap` + `overflow-x: auto`
     put a scrollbar under the tab strip on ordinary desktop widths, which is
     what made these read as a scrolling list rather than as tabs. */
  display: flex; flex-wrap: wrap; gap: .25rem;
  border-bottom: 2px solid var(--cc-line);
}
.nav-tabs .nav-link {
  border: 0; border-bottom: 3px solid transparent;
  border-radius: .55rem .55rem 0 0;
  padding: .7rem 1.15rem; margin-bottom: -2px;
  color: var(--cc-ink-2); white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-tabs .nav-link:hover { background: var(--cc-sand); color: var(--cc-plum); border-bottom-color: var(--cc-line); }
.nav-tabs .nav-link.active {
  background: var(--cc-plum-soft); color: var(--cc-plum);
  border-bottom-color: var(--cc-gold);
}
/* Only a genuinely narrow screen needs to scroll the strip. */
@media (max-width: 575.98px) {
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
}

/* Panes now sit in a .tab-content wrapper as Bootstrap expects. This stays as a
   backstop for any pane built at runtime outside one. */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* --------------------------------------------------------------------------
   10. Motion. Reveal classes are added by JS, never in the markup, so a page
       with blocked JavaScript renders fully visible instead of blank.
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transition: opacity .62s cubic-bezier(.22,.68,.3,1), transform .62s cubic-bezier(.22,.68,.3,1);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(20px); }
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="scale"] { transform: scale(.965); }
[data-reveal="rise"]  { transform: translateY(34px) scale(.99); }
[data-reveal].in { opacity: 1; transform: none; }

.card-media img, .figure-brand img { animation: cc-img-in .7s ease both; }
@keyframes cc-img-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1035; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cc-gold), var(--cc-gold-2)); transition: width .08s linear; }

.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--cc-line); background: #fff; color: var(--cc-plum);
  box-shadow: var(--cc-shadow-2); display: grid; place-items: center;
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }

.toast { --bs-toast-bg: var(--cc-ink); --bs-toast-color: #fff; --bs-toast-border-color: transparent; --bs-toast-border-radius: .75rem; box-shadow: var(--cc-shadow-3); }
.toast a { color: var(--cc-gold-2); font-weight: 600; }
.toast .tick { width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--cc-ok); color: #fff; display: grid; place-items: center; font-size: .72rem; }
.toast .tick.warn { background: var(--cc-gold); color: #3A2705; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .card-media img, .figure-brand img { animation: none; }
  .btn:hover, .card-hover:hover { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1399.98px) {
  .site-navbar .nav-link { padding: .55rem .5rem; font-size: .89rem; }
}
@media (max-width: 1199.98px) {
  .site-navbar .nav-link { padding: .55rem .4rem; font-size: .86rem; }
}
/* The tightest point on the whole site is just above the navbar's expand
   breakpoint: at 992px Bootstrap has only this instant switched the full menu
   back on, and the nav plus the actions group is 16px wider than the viewport.
   It clears by 1008px, so the squeeze is applied to that band alone rather than
   spending the space everywhere. */
@media (min-width: 992px) and (max-width: 1119.98px) {
  .site-navbar .nav-link { padding: .55rem .18rem; font-size: .83rem; }
  .site-navbar .navbar-nav { column-gap: 0; }
  .site-navbar .btn-sm { padding-inline: .62rem; font-size: .79rem; }
  .site-navbar .icon-btn { width: 32px; height: 32px; }
  .site-navbar .gap-2 { gap: .35rem !important; }
  .brand-name small { display: none; }
}
@media (max-width: 575.98px) {
  .brand-name small { display: none; }
  .brand-name { font-size: 1.02rem; }
  .demo-bar { font-size: .72rem; }
}
@media (max-width: 399.98px) {
  .brand-name { display: none; }
  .brand-mark { width: 30px; height: 30px; font-size: .95rem; }
}

/* --------------------------------------------------------------------------
   Search overlay
   Opened from the header, from any [data-search-open] trigger, and with "/"
   or Cmd/Ctrl-K. The scrim dims the page rather than hiding it, so it reads
   as a layer over the site instead of a separate screen.
   -------------------------------------------------------------------------- */

.icon-btn {
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cc-line); border-radius: 50%;
  background: #fff; color: var(--cc-ink-2); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--cc-plum-soft); color: var(--cc-plum); border-color: #DCCFBB; }

body.search-open { overflow: hidden; }

.search-overlay { position: fixed; inset: 0; z-index: 1090; display: flex; justify-content: center; }
.search-overlay[hidden] { display: none; }
.search-scrim {
  position: absolute; inset: 0;
  background: rgba(36, 28, 43, .55);
  backdrop-filter: blur(3px);
  animation: cc-fade-in .18s ease both;
}
.search-panel {
  position: relative; z-index: 1;
  width: min(100% - 2rem, 720px);
  margin-top: clamp(1.5rem, 9vh, 7rem);
  align-self: flex-start;
  background: #fff; border-radius: 1.15rem;
  box-shadow: var(--cc-shadow-3);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: min(70vh, 620px);
  animation: cc-pop-in .2s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes cc-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes cc-pop-in { from { opacity: 0; transform: translateY(-10px) scale(.985) } to { opacity: 1; transform: none } }

.search-bar {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid var(--cc-line-2);
  color: var(--cc-ink-3); flex: none;
}
.search-bar input {
  flex: 1; border: 0; outline: 0; background: none;
  font-family: var(--cc-serif); font-size: 1.5rem; color: var(--cc-ink);
}
.search-bar input::placeholder { color: var(--cc-ink-3); font-size: 1.15rem; }
.search-bar input::-webkit-search-cancel-button { display: none; }
.search-esc {
  border: 1px solid var(--cc-line); background: var(--cc-sand); color: var(--cc-ink-3);
  border-radius: .4rem; padding: .2rem .5rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; cursor: pointer;
}
.search-esc:hover { color: var(--cc-plum); border-color: var(--cc-plum); }

.search-results { overflow-y: auto; padding: .5rem; }
.search-empty { padding: 1.75rem 1rem; text-align: center; color: var(--cc-ink-3); font-size: .93rem; margin: 0; }
.search-hit {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .8rem .95rem; border-radius: .7rem;
  text-decoration: none; color: inherit;
}
.search-hit:hover, .search-hit:focus-visible { background: var(--cc-sand); }
.search-hit-type {
  flex: none; width: 6.5rem;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 650; color: var(--cc-gold-ink);
}
.search-hit-main { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.search-hit-main b { font-size: .97rem; color: var(--cc-ink); font-weight: 600; }
.search-hit-main span { font-size: .84rem; color: var(--cc-ink-3); }

/* The big click target that opens the overlay */

@media (max-width: 575.98px) {
  .search-bar input { font-size: 1.2rem; }
  .search-bar input::placeholder { font-size: .95rem; }
  .search-hit { flex-direction: column; gap: .2rem; }
  .search-hit-type { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .search-scrim, .search-panel { animation: none; }
}

/* --------------------------------------------------------------------------
   Orphaned classes

   Found by listing every class used in the DOM and subtracting every class
   defined in a loaded stylesheet. These were in the markup with nothing behind
   them. The rest of the orphans carry their own inline styles and are only
   hooks, so they are deliberately left alone.
   -------------------------------------------------------------------------- */

/* The button row under a hero heading. Used on eight pages with no styles, so
   the buttons had no gap and no separation from the copy above them. */
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* The drawer uses .accordion-button for plain links too. Bootstrap gives that
   class a chevron, which on a link that does not expand anything is noise. */
.no-caret::after { display: none !important; }

.img-contain img { object-fit: contain !important; }
.bg-gold { background: var(--cc-gold-soft) !important; }

/* separator between post meta items */
.dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .45; vertical-align: middle; margin-inline: .5rem; }

/* 404 */
.lost { text-align: center; padding-block: clamp(3rem, 8vw, 5.5rem); }
.big {
  display: block; font-family: var(--cc-serif); font-weight: 600; line-height: .9;
  font-size: clamp(5rem, 18vw, 11rem); color: var(--cc-gold-2);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* 404 orbs. Created by the page script, which sets size, position and an
   animation delay inline, and expects the rest from here. Without these the
   spans stayed inline, collapsed to nothing, and the effect never appeared. */
.lost { position: relative; overflow: hidden; }
.lost > .container { position: relative; z-index: 1; }
.orb {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(232,184,75,.5), rgba(232,184,75,0) 70%);
  pointer-events: none; filter: blur(2px);
  animation: cc-drift 14s ease-in-out infinite;
}
@keyframes cc-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .55; }
  50%      { transform: translate3d(0, -22px, 0) scale(1.12); opacity: .85; }
}
#bigNum { transition: transform .25s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
  #bigNum { transition: none; }
}

/* --------------------------------------------------------------------------
   Contrast on dark grounds

   Two failures found by measuring every text node against its real background:

   1. The hero subtitle inherited the body ink colour (#4A3F55) and sat on the
      deep plum hero (#2E1B3A). That is 1.60:1, so the sentence under every hero
      headline was very nearly invisible. Worst issue on the site.
   2. The brand tagline was switched to the darker accessible gold to fix the
      near-white header, but that rule applied everywhere, including the dark
      footer, where it dropped to 2.85:1. Dark grounds need the light gold.
   -------------------------------------------------------------------------- */

.hero .lede,
.hero p,
.hero-inner p { color: rgba(255, 255, 255, .88); }

.hero .brand-name small,
#site-footer .brand-name small,
.on-dark .brand-name small { color: var(--cc-gold-2); }

/* --------------------------------------------------------------------------
   Phone

   Measured at 390px, for the things that only bite on a handset rather than in
   a narrow desktop window.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  /* iOS Safari zooms the whole page when a focused field is under 16px, and
     does not zoom back out. Every control was at .95rem (15.2px), so tapping
     any field on any form threw the layout. 16px is the threshold, exactly. */
  /* element+class, because admin.css and booking.css load after this file and
     their own rules otherwise win on source order */
  input.form-control, select.form-select, textarea.form-control,
  .form-control, .form-select,
  .search-bar input { font-size: 16px; }

  /* 44px is the smallest comfortable touch target. These were 34 to 38. */
  .nav-tabs .nav-link { padding-block: .85rem; }
  .drop { padding-block: .5rem; }

  /* every control and button reaches the 44px minimum, not just the round ones */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; padding-block: .62rem; }
  .navbar-brand.p-0 { padding-block: .45rem !important; }
  .navbar-toggler { min-width: 44px; min-height: 44px; }
  .accordion-button { min-height: 48px; }
  .link-arrow { min-height: 44px; align-items: center; }
  .bk-rail button { min-height: 44px; }
  .site-footer .socials a { width: 44px; height: 44px; }
  .to-top { width: 44px; height: 44px; }
  .site-footer .brand-link { min-height: 44px; align-items: center; }

  /* nothing carrying a sentence drops under 13px */
  .demo-bar { font-size: .85rem; }
  .demo-bar a { display: inline-block; padding-block: .35rem; }
  .small, .form-text, .hint, .footer-note, .search-hit-main span { font-size: .84rem; }
  .card .small, .line .meta { font-size: .85rem; }
}