:root { color-scheme: dark; color: #f6f3ee; background: #080809; }
body { background: #080809; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #f8b27d; outline-offset: 3px; }
.topbar { background: rgba(8,8,9,.94); border-color: #363238; }
.wordmark-label { color: #c5c5bd; }
.main-nav a { color: #efede9; }
.main-nav a:hover { color: #f4ac78; }
.edit-toggle { border-color: #826ba6; background: #241d30; color: #f5f0fc; }
.edit-toggle:hover, .edit-toggle[aria-pressed="true"] { background: #674b88; }

.hero {
  max-width: 1700px;
  min-height: 760px;
  grid-template-columns: .82fr 1.18fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3.8rem, 7vw, 6.5rem);
}
.hero-logo { width: 112px; margin-block-end: 2rem; }
.eyebrow { color: #a8b993; font-weight: 750; letter-spacing: 0; }
.hero h1 { max-width: 9em; font-size: clamp(3.4rem, 5.7vw, 6.1rem); line-height: 1.09; letter-spacing: -.065em; color: #f6f3ee; }
.hero h1 em { color: #ee915c; }
.hero-description { max-width: 34rem; color: #d2d0cc; line-height: 1.8; }
.button-primary { background: #e87535; color: #17110d; box-shadow: 0 12px 30px rgba(153,65,21,.22); }
.button-primary:hover { background: #f49a66; }
.button-text { color: #f1eee8; border-color: #868473; }
.hero-facts { color: #b9bbb0; border-color: #48443c; }
.hero-facts strong { color: #f6f3ee; }
.hero-art {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  justify-content: stretch;
  gap: 12px;
  height: 620px;
  min-height: 0;
  max-height: none;
  isolation: isolate;
}
.hero-art::before { display: none; }
.hero-art .hero-feature {
  position: relative;
  inset: auto;
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  transform: none;
  transition: filter .18s ease, transform .18s ease;
}
.hero-art .hero-feature:hover { filter: brightness(1.11); transform: translateY(-3px); box-shadow: none; }
.hero-art .hero-feature:active { transform: scale(.99); }
.hero-art .hero-feature img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art .hero-feature[hidden] { display: none; }
.hero-art .hero-feature-main { grid-column: 1; grid-row: 1 / 3; }
.hero-art .hero-feature-side { grid-column: 2; grid-row: 1; }
.hero-art .hero-feature-third { grid-column: 2; grid-row: 2; }
.hero-art .hero-feature-main img { object-position: 52% 46%; }
.hero-art .hero-feature-side img { object-position: 50% 52%; }
.hero-art .hero-feature-third img { object-position: 50% 4%; }
.hero-feature-shade { background: linear-gradient(180deg, transparent 48%, rgba(4,3,5,.9) 100%); }
.hero-feature-copy small { color: #d9d0e5; }
.hero-feature-copy strong { color: #fff; }
.hero-feature-main .hero-feature-copy strong { font-size: clamp(1.35rem, 2vw, 2rem); }
.hero-feature-side .hero-feature-copy strong, .hero-feature-third .hero-feature-copy strong { font-size: clamp(1rem, 1.4vw, 1.3rem); }
.hero-art.is-single { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.hero-art.is-single .hero-feature:not([hidden]) { grid-column: 1; grid-row: 1; width: 100%; height: 100%; inset: auto; }
.hero-art:has(.hero-feature-main[hidden]):not(.is-single) { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.hero-art:has(.hero-feature-main[hidden]):not(.is-single) .hero-feature:not([hidden]) { grid-column: auto; grid-row: 1; }
.hero-art:has(.hero-feature-side[hidden]):not(.is-single) .hero-feature-third { grid-row: 1 / 3; }
.hero-art:has(.hero-feature-third[hidden]):not(.is-single) .hero-feature-side { grid-row: 1 / 3; }

#video { background: #111013; }
.section-head { border-color: #494047; }
.section-head h2 { color: #f6f3ee; }
.section-description { color: #c8c4c7; }
.section-count { color: #8e887f; }
.filter { background: #211e22; border-color: #584d55; color: #e7e1e4; }
.filter:hover { background: #32292e; border-color: #dd8d56; }
.filter.is-active { background: #e87535; border-color: #e87535; color: #1c1009; }
.video-poster { background: #28232b; }
.video-badge { background: rgba(14,12,17,.84); border-color: #7d6a81; color: #fff; }
.video-play { background: #f8f3eb; color: #1d1919; }
.video-info h3 { color: #f6f3ee; }
.video-meta { color: #b9b4b8; }
.audio-warning { color: #f3b47e; }
.photo-button img { background: #201d22; }
.footer { border-color: #494047; color: #c2bcc0; }
.footer a { color: #f1e6dc; }
dialog { background: #17151a; color: #f6f3ee; border-color: #625363; }
.dialog-kicker { color: #afbf99; }
.icon-button, .photo-arrow { background: #3d3040; }
.icon-button:hover, .photo-arrow:hover { background: #6d527c; }
.photo-stage { background: #0c0b0e; }
.photo-dialog .dialog-top > div, .photo-dialog .dialog-note { display: none; }
.edit-panel { background: #1e1a24; border-color: #6c5481; }
.edit-panel-copy p { color: #ddd4df; }
.edit-panel-actions button, .title-actions button { background: #49365a; border-color: #8f75a3; }
.edit-panel-actions button:hover, .title-actions button:hover { background: #72518e; }
.edit-status { color: #d6bbeb; }
.is-editing .video-card, .is-editing .photo-card { background: #211d25; border-color: #665465; }
.edit-drag-handle, .edit-card-button { background: #3b2f40; border-color: #775c79; }
.edit-card-button:hover { background: #664d6b; }
.title-dialog input { background: #0f0d11; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: .85fr 1.15fr; }
  .hero-art { height: 490px; }
}
@media (max-width: 760px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 2rem; padding-block: 2.3rem 4rem; }
  .hero-copy, .hero-art { min-width: 0; max-width: 100%; }
  .hero-art { order: -1; height: 355px; min-height: 0; max-height: none; gap: 7px; margin: 0; }
  .hero-logo { width: 85px; margin-block-end: 1rem; }
  .hero h1 { font-size: clamp(2.6rem, 10.2vw, 4.5rem); }
  .hero-feature-copy { right: .6rem; left: .6rem; bottom: .7rem; }
  .hero-feature-main .hero-feature-copy strong { font-size: 1.13rem; }
  .hero-feature-side .hero-feature-copy strong, .hero-feature-third .hero-feature-copy strong { font-size: .78rem; }
  .hero-feature-copy small { font-size: .57rem; }
  .hero-feature-copy > span { font-size: .62rem; }
}
@media (prefers-reduced-transparency: reduce) { .topbar { background: #080809; } }
@media (prefers-contrast: more) { .filter { border-color: #eee6df; } .section-description, .video-meta { color: #f2eeee; } }