.sc-section { padding-block: var(--sc-space-section); }
.sc-section--compact { padding-block: var(--sc-space-section-compact); }
.sc-section--inverse { background: var(--sc-color-surface-inverse); color: var(--sc-color-text-inverse); }
.sc-section--raised { background: var(--sc-color-surface-raised); }

.sc-stack { display: flex; flex-direction: column; gap: var(--sc-stack-gap, var(--sc-space-5)); }
.sc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-cluster-gap, var(--sc-space-4)); }
.sc-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-space-5); }
.sc-flow > * { margin-block: 0; }
.sc-flow > * + * { margin-block-start: var(--sc-flow-space, 1em); }
.sc-prose { max-inline-size: 65ch; }
.sc-prose--narrow { max-inline-size: 48ch; }
.sc-text-muted { color: var(--sc-color-text-muted); }
.sc-text-small { font-size: var(--sc-font-size-0); }
.sc-lead { font-size: var(--sc-font-size-2); line-height: 1.55; }

.sc-button--secondary {
  border-color: var(--sc-color-action);
  background: transparent;
  color: var(--sc-color-action);
}
.sc-button--secondary:hover { background: var(--sc-color-action); color: var(--sc-color-text-inverse); }
.sc-button--ghost { background: transparent; color: var(--sc-color-text); }
.sc-button--ghost:hover { background: color-mix(in srgb, var(--sc-color-text) 7%, transparent); color: var(--sc-color-text); }
.sc-button--inverse { background: var(--sc-color-white); color: var(--sc-color-brand-earth); }
.sc-button--inverse:hover { background: var(--sc-color-cream-200); color: var(--sc-color-brand-earth); }
.sc-button--small { min-block-size: var(--sc-size-control-sm); padding: var(--sc-space-3) var(--sc-space-5); }
.sc-button--large { min-block-size: var(--sc-size-control-lg); padding-inline: var(--sc-space-7); }
.sc-button--block { inline-size: 100%; }
.sc-button__icon { inline-size: var(--sc-size-icon-md); block-size: var(--sc-size-icon-md); flex: none; }
.sc-button.is-loading { position: relative; color: transparent; pointer-events: none; }
.sc-button.is-loading::after {
  content: "";
  position: absolute;
  inline-size: 1rem;
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--sc-radius-pill);
  color: var(--sc-color-text-inverse);
  animation: sc-spin 700ms linear infinite;
}

.sc-field { display: grid; gap: var(--sc-space-3); }
.sc-field__label { font-size: var(--sc-font-size-0); font-weight: var(--sc-font-weight-medium); }
.sc-field__hint,
.sc-field__message { color: var(--sc-color-text-muted); font-size: var(--sc-font-size-00); line-height: 1.45; }
.sc-field__message { display: none; }
.sc-field.is-invalid .sc-field__message { display: block; color: var(--sc-color-danger); }

.sc-input,
.sc-select,
.sc-textarea {
  inline-size: 100%;
  min-block-size: var(--sc-size-control-md);
  padding: var(--sc-space-4) var(--sc-space-5);
  border: var(--sc-border-width) solid var(--sc-color-border-strong);
  border-radius: var(--sc-radius-none);
  background: var(--sc-color-surface-raised);
  color: var(--sc-color-text);
  font: inherit;
  transition: var(--sc-transition-color), box-shadow var(--sc-duration-fast) var(--sc-ease-standard);
}
.sc-input::placeholder,
.sc-textarea::placeholder { color: var(--sc-color-text-soft); opacity: 1; }
.sc-input:hover,
.sc-select:hover,
.sc-textarea:hover { border-color: var(--sc-color-text); }
.sc-input:focus,
.sc-select:focus,
.sc-textarea:focus { border-color: var(--sc-color-focus); box-shadow: var(--sc-shadow-focus); outline: 0; }
.sc-input:disabled,
.sc-select:disabled,
.sc-textarea:disabled { background: var(--sc-color-gray-100); cursor: not-allowed; opacity: 0.7; }
.sc-field.is-invalid :is(.sc-input, .sc-select, .sc-textarea) { border-color: var(--sc-color-danger); }
.sc-textarea { min-block-size: 8rem; resize: vertical; }
.sc-select { appearance: none; padding-inline-end: 3rem; }
.sc-select-wrap { position: relative; }
.sc-select-wrap::after {
  content: "";
  position: absolute;
  inset: 50% var(--sc-space-5) auto auto;
  inline-size: 0.5rem;
  aspect-ratio: 1;
  border-inline-end: 1px solid currentColor;
  border-block-end: 1px solid currentColor;
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.sc-checkbox,
.sc-radio { display: inline-flex; align-items: flex-start; gap: var(--sc-space-3); cursor: pointer; }
.sc-checkbox input,
.sc-radio input { inline-size: 1.125rem; block-size: 1.125rem; margin-block-start: 0.2em; accent-color: var(--sc-color-action); }

.sc-badge {
  display: inline-flex;
  min-block-size: 1.5rem;
  align-items: center;
  padding: var(--sc-space-2) var(--sc-space-3);
  border: var(--sc-border-width) solid var(--sc-color-border);
  border-radius: var(--sc-radius-pill);
  background: var(--sc-color-surface-raised);
  color: var(--sc-color-text);
  font-size: var(--sc-font-size-00);
  font-weight: var(--sc-font-weight-semibold);
  letter-spacing: var(--sc-letter-spacing-wide);
  line-height: 1;
  text-transform: uppercase;
}
.sc-badge--brand { border-color: var(--sc-color-brand-gold); background: var(--sc-color-brand-gold); color: var(--sc-color-white); }
.sc-badge--accent { border-color: transparent; background: color-mix(in srgb, var(--sc-color-gold-400) 24%, white); color: var(--sc-color-gold-700); }
.sc-badge--success { border-color: transparent; background: color-mix(in srgb, var(--sc-color-success) 13%, white); color: var(--sc-color-success); }
.sc-badge--danger { border-color: transparent; background: color-mix(in srgb, var(--sc-color-danger) 12%, white); color: var(--sc-color-danger); }

.sc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  background: var(--sc-color-surface-raised);
  color: var(--sc-color-text);
  container: sc-card / inline-size;
}
.sc-card--bordered { border: var(--sc-border-width) solid var(--sc-color-border); }
.sc-card--elevated { box-shadow: var(--sc-shadow-sm); }
.sc-card__media { position: relative; overflow: hidden; aspect-ratio: var(--sc-card-ratio, 4 / 5); background: var(--sc-color-surface-muted); }
.sc-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--sc-duration-slow) var(--sc-ease-standard); }
.sc-card:hover .sc-card__media img { transform: scale(1.025); }
.sc-card__body { display: grid; gap: var(--sc-space-3); padding: var(--sc-space-5); }
.sc-card__title { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-font-size-3); font-weight: var(--sc-font-weight-regular); line-height: var(--sc-line-height-heading); }
.sc-card__meta { color: var(--sc-color-text-muted); font-size: var(--sc-font-size-0); }
.sc-card__badge { position: absolute; inset: var(--sc-space-4) auto auto var(--sc-space-4); z-index: var(--sc-z-raised); }

@container sc-card (min-width: 34rem) {
  .sc-card--horizontal { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr); }
  .sc-card--horizontal .sc-card__media { block-size: 100%; min-block-size: 22rem; }
  .sc-card--horizontal .sc-card__body { align-content: center; padding: var(--sc-space-8); }
}

.sc-icon {
  display: inline-block;
  inline-size: var(--sc-size-icon-md);
  block-size: var(--sc-size-icon-md);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  vertical-align: middle;
}
.sc-icon--small { inline-size: var(--sc-size-icon-sm); block-size: var(--sc-size-icon-sm); }
.sc-icon--large { inline-size: var(--sc-size-icon-lg); block-size: var(--sc-size-icon-lg); }

.sc-breadcrumb { overflow-x: auto; scrollbar-width: none; }
.sc-breadcrumb::-webkit-scrollbar { display: none; }
.sc-breadcrumb__list { display: flex; align-items: center; gap: var(--sc-space-3); min-inline-size: max-content; padding: 0; margin: 0; list-style: none; }
.sc-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--sc-space-3); color: var(--sc-color-text-muted); font-size: var(--sc-font-size-00); letter-spacing: var(--sc-letter-spacing-wide); text-transform: uppercase; }
.sc-breadcrumb__item:not(:last-child)::after { content: "/"; color: var(--sc-color-text-soft); }
.sc-breadcrumb a { color: inherit; text-decoration: none; transition: var(--sc-transition-color); }
.sc-breadcrumb a:hover { color: var(--sc-color-text); }
.sc-breadcrumb [aria-current="page"] { color: var(--sc-color-text); }

.sc-dropdown { position: relative; display: inline-block; }
.sc-dropdown__menu {
  position: absolute;
  inset: calc(100% + var(--sc-space-3)) 0 auto auto;
  z-index: var(--sc-z-dropdown);
  min-inline-size: 14rem;
  padding: var(--sc-space-3);
  border: var(--sc-border-width) solid var(--sc-color-border);
  background: var(--sc-color-surface-raised);
  box-shadow: var(--sc-shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.4rem);
  transition: opacity var(--sc-duration-fast) var(--sc-ease-standard), var(--sc-transition-transform);
}
.sc-dropdown.is-open .sc-dropdown__menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sc-dropdown__item { display: block; inline-size: 100%; padding: var(--sc-space-3) var(--sc-space-4); border: 0; background: transparent; color: inherit; text-align: start; text-decoration: none; }
.sc-dropdown__item:hover,
.sc-dropdown__item:focus-visible { background: var(--sc-color-surface-muted); outline: 0; }

.sc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--sc-z-overlay);
  display: grid;
  place-items: center;
  padding: var(--sc-space-5);
  background: var(--sc-color-overlay);
}
.sc-modal {
  inline-size: min(100%, 40rem);
  max-block-size: min(90dvh, 50rem);
  overflow: auto;
  background: var(--sc-color-surface-raised);
  box-shadow: var(--sc-shadow-overlay);
}
.sc-modal__header,
.sc-modal__body,
.sc-modal__footer { padding: var(--sc-space-6); }
.sc-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sc-space-5); border-block-end: var(--sc-border-width) solid var(--sc-color-border); }
.sc-modal__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sc-space-3); border-block-start: var(--sc-border-width) solid var(--sc-color-border); }

.sc-toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sc-space-4);
  inline-size: min(100%, 26rem);
  padding: var(--sc-space-5);
  border-inline-start: 3px solid var(--sc-color-info);
  background: var(--sc-color-surface-raised);
  box-shadow: var(--sc-shadow-md);
}
.sc-toast--success { border-inline-start-color: var(--sc-color-success); }
.sc-toast--warning { border-inline-start-color: var(--sc-color-warning); }
.sc-toast--danger { border-inline-start-color: var(--sc-color-danger); }
.sc-toast__title { margin: 0; font-size: var(--sc-font-size-0); font-weight: var(--sc-font-weight-semibold); }
.sc-toast__text { margin: var(--sc-space-2) 0 0; color: var(--sc-color-text-muted); font-size: var(--sc-font-size-00); }

.sc-spinner {
  display: inline-block;
  inline-size: var(--sc-spinner-size, 1.5rem);
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  border-inline-end-color: currentColor;
  border-radius: var(--sc-radius-pill);
  animation: sc-spin 700ms linear infinite;
}

.sc-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--sc-radius-xs);
  background: var(--sc-color-surface-muted);
  color: transparent;
}
.sc-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 55%), transparent);
  transform: translateX(-100%);
  animation: sc-shimmer 1.6s var(--sc-ease-standard) infinite;
}
.sc-skeleton--text { block-size: 0.85em; }
.sc-skeleton--title { block-size: 1.5rem; inline-size: 65%; }
.sc-skeleton--media { aspect-ratio: 4 / 5; }

.sc-state {
  display: grid;
  justify-items: center;
  gap: var(--sc-space-5);
  padding: var(--sc-space-9) var(--sc-space-6);
  border: var(--sc-border-width) solid var(--sc-color-border);
  text-align: center;
}
.sc-state__icon { inline-size: 2rem; block-size: 2rem; color: var(--sc-color-text-muted); }

.sc-reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--sc-duration-slow) var(--sc-ease-enter), transform var(--sc-duration-slow) var(--sc-ease-enter);
}
.sc-reveal.is-visible { opacity: 1; transform: translateY(0); }
.sc-fade { animation: sc-fade-in var(--sc-duration-slow) var(--sc-ease-enter) both; }
.sc-slide-up { animation: sc-slide-up var(--sc-duration-slow) var(--sc-ease-enter) both; }

@keyframes sc-spin { to { transform: rotate(1turn); } }
@keyframes sc-shimmer { to { transform: translateX(100%); } }
@keyframes sc-fade-in { from { opacity: 0; } }
@keyframes sc-slide-up { from { opacity: 0; transform: translateY(1rem); } }

@media (prefers-reduced-motion: reduce) {
  .sc-scope *,
  .sc-scope *::before,
  .sc-scope *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .sc-reveal { opacity: 1; transform: none; }
}