/* A small art-direction gallery. Every state is authored and visible without animation. */
.ui-main > .director { margin: 104px auto; }
.director-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 35px; }
.director-eyebrow { display: block; margin-bottom: 18px; color: #657d7c; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.director-heading h2 { margin: 0; font-size: clamp(38px, 3.9vw, 55px); line-height: 1.07; letter-spacing: -.05em; font-weight: 750; }
.director-heading em { color: #62827b; font: inherit; }
.director-heading > p { max-width: 385px; margin: 0 0 4px; font-size: 15px; line-height: 1.85; color: #6a7485; }
.director-workspace { overflow: hidden; border: 1px solid #e1e4e7; border-radius: 24px; background: #fff; box-shadow: 0 20px 60px -40px #29362b40; }
.director-scene { display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); min-width: 0; }
.director-frame { position: relative; margin: 0; min-width: 0; overflow: hidden; aspect-ratio: 3 / 2; background: #e4d7c3; }
.director-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.director-frame::after { content: ''; position: absolute; inset: 60% 0 0; background: linear-gradient(transparent, #1e211b70); pointer-events: none; }
.director-frame figcaption { position: absolute; z-index: 1; left: 30px; right: 24px; bottom: 27px; font-size: clamp(17px, 1.7vw, 25px); letter-spacing: -.025em; line-height: 1.3; font-weight: 650; color: #fff; }
.director-frame-label { position: absolute; top: 24px; left: 28px; padding: 8px 11px; border: 1px solid #ffffff70; border-radius: 5px; color: #fff; background: #18201b50; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.director-notes { display: flex; flex-direction: column; padding: clamp(24px, 2.7vw, 40px); background: #faf8f3; color: #3b423b; }
.director-note-label { color: #788272; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.director-notes h3 { margin: 24px 0 16px; font-size: clamp(22px, 2.15vw, 31px); font-weight: 650; line-height: 1.17; letter-spacing: -.04em; }
.director-notes > p { margin: 0 0 20px; font-size: 13px; line-height: 1.8; color: #67705f; }
.director-notes dl { margin: auto 0 0; font-size: 12px; line-height: 1.5; }
.director-notes dl > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; border-top: 1px solid #dce0d5; padding: 11px 0; }
.director-notes dt { color: #677261; }
.director-notes dd { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.director-swatches { display: flex; gap: 4px; }
.director-swatches i { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--swatch); border: 1px solid #00000008; }
.director-note-tail { margin-top: 15px; font-size: 9px; color: #8a9282; }
.director-studio .director-notes { background: #eff2eb; }
.director-evening .director-notes { background: #302430; color: #f4e9e6; }
.director-evening .director-note-label, .director-evening .director-note-tail { color: #bba2b6; }
.director-evening .director-notes > p, .director-evening dt { color: #baaebc; }
.director-evening dl > div { border-color: #51414f; }
.director-controls { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 20px; padding: 20px 28px; }
.director-controls-label { color: #7b8595; font-size: 9px; font-weight: 700; letter-spacing: .11em; }
.director-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.director-choices button { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px; border: 1px solid transparent; background: transparent; border-radius: 12px; font-family: inherit; text-align: left; color: #758087; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.director-choices button:hover { background: #f5f7f5; }
.director-choices button[aria-selected=true] { border-color: #c1d4ce; background: #f0f6f3; color: #253e37; }
.director-choices button:focus-visible { outline: 3px solid #559a8c; outline-offset: 3px; }
.director-choices img { display: block; flex: 0 0 66px; width: 66px; height: 48px; object-fit: cover; border-radius: 7px; }
.director-choices b { display: block; font-size: 13px; font-weight: 700; }
.director-choices small { display: block; margin-top: 4px; font-size: 9px; white-space: nowrap; color: #7b8881; }
.director-choices i { width: 6px; height: 6px; flex: 0 0 6px; margin-left: auto; border-radius: 50%; background: #d7e0dc; }
.director-choices [aria-selected=true] i { background: #568a79; box-shadow: 0 0 0 3px #dcece4; }
.director-footnote { display: flex; justify-content: space-between; align-items: baseline; gap: 25px; margin-top: 18px; }
.director-footnote p { margin: 0; font-size: 11px; line-height: 1.75; color: #707b8b; }
.director-footnote a { flex-shrink: 0; font-size: 12px; }
.director-scene.home-panel-enter { animation: director-appear .4s ease-out both; }
@keyframes director-appear { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1100px) {
  .director-notes { padding: 23px; }.director-notes h3 { margin-top: 17px; }.director-notes > p { font-size: 12px; margin-bottom: 14px; }.director-note-tail { display: none; }
  .director-controls { grid-template-columns: 110px minmax(0, 1fr); padding: 16px 20px; gap: 10px; }.director-choices { gap: 7px; }.director-choices button { gap: 9px; }.director-choices img { flex-basis: 49px; width: 49px; height: 41px; }.director-choices i { display: none; }
}
@media (max-width: 800px) {
  .ui-main > .director { margin: 65px auto; }.director-heading { gap: 24px; align-items: flex-start; }.director-heading h2 { font-size: 38px; }.director-heading > p { max-width: 280px; font-size: 13px; }.director-desktop-break { display: none; }
  .director-scene { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }.director-frame { aspect-ratio: auto; min-height: 370px; }.director-frame img { object-position: 56% center; }
  .director-notes h3 { font-size: 24px; }.director-notes dl > div { grid-template-columns: 48px minmax(0, 1fr); font-size: 10px; }.director-controls { display: block; }.director-controls-label { display: block; margin: 0 0 12px 9px; }.director-choices img { flex-basis: 58px; width: 58px; height: 42px; }
  .director-footnote { align-items: flex-start; }.director-footnote p { max-width: 350px; }
}
@media (max-width: 580px) {
  .director-heading { display: block; margin-bottom: 25px; }.director-eyebrow { font-size: 9px; margin-bottom: 14px; }.director-heading h2 { font-size: 37px; }.director-heading > p { max-width: 340px; margin: 20px 0 0; font-size: 14px; }.director-workspace { border-radius: 19px; }
  .director-scene { display: block; }.director-frame { aspect-ratio: 3 / 2; min-height: 0; }.director-frame img { object-position: center; }.director-frame-label { left: 17px; top: 16px; font-size: 7px; padding: 6px 8px; }.director-frame figcaption { left: 18px; bottom: 18px; font-size: 17px; }
  .director-notes { padding: 24px; display: grid; grid-template-columns: 1fr; }.director-notes h3 { font-size: 25px; margin: 13px 0 10px; }.director-notes h3 br { display: none; }.director-notes h3 br::after { content: ' '; }.director-notes > p { font-size: 12px; margin-bottom: 19px; }
  .director-notes dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 15px; }.director-notes dl > div { display: block; padding: 9px 0 0; font-size: 11px; }.director-notes dl > div:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 59px 1fr; margin-top: 10px; }.director-notes dd { margin-top: 5px; }.director-notes dl > div:last-child dd { margin-top: 0; }
  .director-workspace { display: flex; flex-direction: column; }.director-controls { order: -1; padding: 16px 12px 12px; border-bottom: 1px solid #e1e4e7; }.director-controls-label { margin: 0 0 12px 4px; font-size: 8px; }.director-choices { gap: 6px; }.director-choices button { display: block; text-align: center; padding: 5px 5px 10px; border-radius: 10px; }.director-choices img { width: 100%; height: auto; aspect-ratio: 3 / 2; margin-bottom: 9px; border-radius: 6px; }.director-choices b { font-size: 12px; }.director-choices small { display: none; }
  .director-footnote { display: block; margin-top: 15px; }.director-footnote p { font-size: 10px; }.director-footnote a { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .director *, .director *::before, .director *::after { animation: none !important; transition: none !important; } }