/*
 * Muse: the Theme Kit in Muse's own look. Linked after themes/_shared/assets/css/kit.css, so the variables set here
 * replace its defaults for every block and module section.
 *
 * Soft and polished: coloured sections float as rounded bands inset from the window's edges, cards are rounded and
 * lifted by a soft shadow instead of a border, buttons, fields and chips are pills, small labels are set in the display
 * face's italic after a sparkle, quotes are italic, and motion is gentle. Headings use the display face at its lightest
 * weight (--muse-heading-weight, set by the layout from the font palette).
 */

.kit-root {
  --kit-radius: 1.5rem;
  --kit-radius-sm: 1rem;
  --kit-media-radius: 1.25rem;
  --kit-button-radius: 999px;
  --kit-input-radius: 999px;
  --kit-chip-radius: 999px;
  --kit-shadow: 0 1px 2px color-mix(in srgb, var(--kit-text) 5%, transparent), 0 22px 44px -30px color-mix(in srgb, var(--kit-text) 34%, transparent);
  --kit-shadow-hover: 0 2px 4px color-mix(in srgb, var(--kit-text) 6%, transparent), 0 30px 56px -28px color-mix(in srgb, var(--kit-text) 42%, transparent);
  --kit-heading-weight: var(--muse-heading-weight, 400);
  --kit-heading-tracking: -0.02em;
  --kit-button-weight: 500;
  --kit-button-tracking: 0.01em;
  --kit-button-transform: none;
  --kit-eyebrow-tracking: 0;
  --kit-star: var(--accent, #a5525f);
  --kit-card-pad: clamp(1.5rem, 2.4vw, 2.1rem);
  --kit-gap-medium: 1.5rem;
  --kit-gap-large: clamp(2rem, 4vw, 3.25rem);
  --kit-gutter: var(--muse-gutter, clamp(1.25rem, 4vw, 3rem));
  --kit-width-normal: 74rem;
  --kit-width-narrow: 44rem;
  --kit-width-wide: 90rem;
  --kit-pad-normal: clamp(4rem, 8vw, 7rem);
  --kit-pad-compact: clamp(2.25rem, 4.5vw, 3.5rem);
  --kit-pad-spacious: clamp(5rem, 10vw, 9rem);
  --kit-speed: 320ms;
  --kit-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Coloured sections float as rounded bands, inset from the window like the header and the footer. */
.kit-section--muted,
.kit-section--inverse,
.kit-section--accent,
.kit-section--image {
  margin: clamp(0.25rem, 0.8vw, 0.6rem) var(--muse-inset, clamp(0.5rem, 1.4vw, 1.25rem));
  border-radius: var(--muse-radius-large, clamp(1.5rem, 3.5vw, 2.75rem));
}

/* Large, light headings set close. */
.kit-heading {
  line-height: 1.08;
  text-wrap: balance;
}

.kit-heading--1 {
  font-size: clamp(2.9rem, 1.6rem + 4.8vw, 5.75rem);
  line-height: 0.98;
}

.kit-heading--2 {
  font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.9rem);
  line-height: 1.02;
}

.kit-heading--3 {
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem);
  line-height: 1.15;
}

/* Small labels in the display face's italic, after a sparkle. */
.kit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-heading, serif);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: var(--kit-heading-weight);
  line-height: 1.25;
  text-transform: none;
}

/* The sparkle is cut from the text colour (this file may load nothing, not even an inline picture). */
.kit-eyebrow::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: currentColor;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}

/* Pill buttons: solid ink that turns to the accent on hover, or a soft outline that fills. */
.kit-button {
  min-height: 3.1rem;
  padding: 0.8rem 1.75rem;
  font-size: 0.95rem;
  line-height: 1.3;
}

.kit-button--small {
  min-height: 2.6rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.88rem;
}

.kit-button--primary:hover {
  border-color: var(--kit-accent);
  background: var(--kit-accent);
  color: var(--kit-on-accent);
}

.kit-button--secondary {
  border-color: var(--kit-line-strong);
  background: transparent;
  color: var(--kit-text);
}

.kit-button--secondary:hover {
  border-color: var(--kit-primary);
  background: var(--kit-primary);
  color: var(--kit-on-primary);
}

.kit-button--ghost {
  padding-inline: 0.25rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
}

.kit-link {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* Cards: rounded, lifted by a soft shadow instead of a border; a linked card rises a little on hover. */
.kit-card--surface {
  border-color: transparent;
}

.kit-card--outline {
  border-color: var(--kit-line);
}

.kit-card--linked:hover {
  transform: translateY(-4px);
}

.kit-card__media img {
  transition: transform 900ms var(--kit-ease);
}

.kit-card--linked:hover .kit-card__media img {
  transform: scale(1.04);
}

.kit-card__title {
  font-family: var(--font-heading, serif);
  font-weight: var(--kit-heading-weight);
  letter-spacing: -0.01em;
}

.kit-card__eyebrow {
  font-family: var(--font-heading, serif);
  font-size: 1.05rem;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

/* Round photos of people get a soft ring. */
.kit-avatar {
  box-shadow: 0 0 0 4px var(--kit-surface), 0 0 0 5px color-mix(in srgb, var(--kit-accent) 45%, transparent);
}

/* Fields are soft pills on the surface colour; a longer text gets a rounded box. */
.kit-input {
  min-height: 3.1rem;
  padding-inline: 1.25rem;
  border-color: var(--kit-line);
  background-color: var(--kit-surface);
}

.kit-textarea {
  padding-block: 0.9rem;
  border-radius: 1.25rem;
}

.kit-select {
  padding-inline: 1.25rem 2.75rem;
}

.kit-input:focus {
  border-color: var(--kit-accent);
}

.kit-input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kit-accent) 22%, transparent);
}

.kit-field__label {
  font-size: 0.92rem;
  font-weight: 500;
}

/* Quotes in the display face's italic. */
.kit-quote {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.kit-quote__text {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.35rem, 1rem + 1.1vw, 1.85rem);
  font-style: italic;
  font-weight: var(--kit-heading-weight);
  line-height: 1.4;
}

.kit-quote__text::before {
  content: "\201C";
  display: block;
  height: 0.55em;
  color: var(--kit-accent-text);
  font-size: 2.6em;
  font-style: normal;
  line-height: 1;
}

.kit-quote__author {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.kit-quote__role {
  margin-top: 0.2rem;
  font-size: 0.88rem;
}

/* Questions are rounded rows on the surface colour, a little apart. */
.kit-accordion__item {
  border: 0;
  border-radius: 1.25rem;
  background: var(--kit-surface);
}

.kit-accordion__item + .kit-accordion__item {
  margin-top: 0.6rem;
}

.kit-accordion__title {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  font-weight: var(--kit-heading-weight);
}

/* Numbers and prices in the display face. */
.kit-output--large,
.kit-price__amount,
.kit-summary__amount {
  font-family: var(--font-heading, serif);
  font-weight: var(--kit-heading-weight);
  letter-spacing: -0.02em;
}

.kit-rich-text blockquote {
  margin-inline: 0;
  padding: 1.25rem 1.5rem;
  border-radius: 1.25rem;
  background: var(--kit-surface-alt);
  font-family: var(--font-heading, serif);
  font-size: 1.3em;
  font-style: italic;
  line-height: 1.45;
}

.kit-rich-text hr {
  width: min(6rem, 30%);
  margin-inline: auto;
  border: 0;
  border-top: 1px solid var(--kit-line-strong);
}

.kit-badge,
.kit-chip {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.kit-carousel__button {
  border-radius: 50%;
}

.kit-dialog,
.kit-drawer--right.is-ready,
.kit-drawer--bottom.is-ready {
  box-shadow: 0 40px 100px -40px color-mix(in srgb, var(--kit-text) 45%, transparent);
}