/* Filaro Collection - explore drawers (map / plan / gallery / progress / media)
   Shared Story / Residences / Note. Contact stays in filaro-contact-drawer.css */

/* All Explore drawers - full viewport over nav (locked 06/Aug/26, same as Neighbourhood).
   Do not use 100vw here - it fights scrollbar-gutter and leaves a right strip.
   Visibility must stay visible until the panel transform finishes - otherwise
   close looks like a hard cut (shell hid before the slide completed).
   Fail-if: drawer sits under nav row (inset site-nav-h / z-index below .site-nav). */
.plan-drawer,
.map-drawer,
.contact-drawer,
.design-drawer,
.progress-drawer,
.media-drawer {
  position: fixed;
  inset: 0;
  z-index: 70; /* above .site-nav (60) */
  width: auto;
  max-width: none;
  background: var(--wine);
  visibility: hidden;
  pointer-events: none;
  opacity: 1;
}
/* is-closing keeps the shell painted through unlock so close does not flash the page */
.plan-drawer.is-open,
.map-drawer.is-open,
.contact-drawer.is-open,
.design-drawer.is-open,
.progress-drawer.is-open,
.media-drawer.is-open,
.plan-drawer.is-closing,
.map-drawer.is-closing,
.contact-drawer.is-closing,
.design-drawer.is-closing,
.progress-drawer.is-closing,
.media-drawer.is-closing {
  visibility: visible;
}
.plan-drawer.is-open,
.map-drawer.is-open,
.contact-drawer.is-open,
.design-drawer.is-open,
.progress-drawer.is-open,
.media-drawer.is-open {
  pointer-events: auto;
}
.design-drawer,
.progress-drawer,
.map-drawer {
  background: var(--cream);
}
.media-drawer {
  background: #0a0a0a;
}
.plan-drawer__panel,
.map-drawer__panel,
.contact-drawer__panel,
.design-drawer__panel,
.progress-drawer__panel,
.media-drawer__panel {
  position: absolute;
  inset: 0;
  background: var(--wine);
  transform: translate3d(0, 100%, 0);
  /* Open SSOT (map): 0.85s ease-out slide up */
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Close SSOT (map): slide + dissolve together; unlock only after gone */
.plan-drawer.is-closing .plan-drawer__panel,
.map-drawer.is-closing .map-drawer__panel,
.contact-drawer.is-closing .contact-drawer__panel,
.design-drawer.is-closing .design-drawer__panel,
.progress-drawer.is-closing .progress-drawer__panel,
.media-drawer.is-closing .media-drawer__panel {
  transition-duration: 0.62s;
}
.plan-drawer.is-closing-dissolve,
.map-drawer.is-closing-dissolve,
.contact-drawer.is-closing-dissolve,
.design-drawer.is-closing-dissolve,
.progress-drawer.is-closing-dissolve,
.media-drawer.is-closing-dissolve {
  opacity: 0;
  transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.plan-drawer.is-open .plan-drawer__panel,
.map-drawer.is-open .map-drawer__panel,
.contact-drawer.is-open .contact-drawer__panel,
.design-drawer.is-open .design-drawer__panel,
.progress-drawer.is-open .progress-drawer__panel,
.media-drawer.is-open .media-drawer__panel,
.plan-drawer.is-closing .plan-drawer__panel,
.map-drawer.is-closing .map-drawer__panel,
.contact-drawer.is-closing .contact-drawer__panel,
.design-drawer.is-closing .design-drawer__panel,
.progress-drawer.is-closing .progress-drawer__panel,
.media-drawer.is-closing .media-drawer__panel {
  will-change: transform;
}
.design-drawer__panel,
.progress-drawer__panel {
  background: var(--cream);
  overflow: hidden;
}
.media-drawer__panel {
  background: #0a0a0a;
  overflow: hidden;
}
.contact-drawer__panel {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Drawer close X - Construction atom: x only, 100% colour, 44px hit pad */
.map-drawer__close,
.plan-drawer__close,
.contact-drawer__close,
.media-view__close,
.design-view__close {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 30;
}
/* Host chrome above iframe - iframe must not eat the X */
.map-drawer__close,
.plan-drawer__close {
  position: absolute;
  top: calc(clamp(1.25rem, 4vh, 2.5rem) - 0.7rem);
  right: calc(var(--gutter) - 0.7rem);
  color: #000;
}
/* Plan: X glyph = right page border (match iframe tools / specs at --gutter) */
.plan-drawer__close {
  right: var(--gutter);
  top: clamp(1.25rem, 4vh, 2.5rem);
  justify-content: flex-end;
  padding-right: 0;
}
.map-drawer__close:hover,
.map-drawer__close:focus-visible,
.plan-drawer__close:hover,
.plan-drawer__close:focus-visible {
  color: #000;
  outline: none;
}
.map-drawer__close-x { display: none; }
/* Phone: host X above map; hide while place card open (swipe closes card; X returns after) */
@media (max-width: 767px) {
  .map-drawer__close {
    top: calc(0.85rem + env(safe-area-inset-top, 0px));
    right: calc(var(--gutter) - 0.35rem);
    z-index: 40;
  }
  body.is-spot-sheet-open .map-drawer__close,
  html.is-spot-sheet-open .map-drawer__close {
    display: none !important;
  }

}
.contact-drawer__close {
  position: absolute;
  top: calc(clamp(1.25rem, 4vh, 2.5rem) - 0.7rem);
  right: calc(var(--gutter) - 0.7rem);
  color: #fff;
}
.contact-drawer__close:hover,
.contact-drawer__close:focus-visible {
  color: #fff;
  outline: none;
}
.media-view__close {
  color: #fff;
  flex: 0 0 auto;
}
.media-view__close:hover,
.media-view__close:focus-visible {
  color: #fff;
  outline: none;
}
.design-view__close {
  color: #000;
  flex: 0 0 auto;
  /* X glyph on chrome right edge - hit pad grows left (not past gutter) */
  justify-content: flex-end;
  padding-right: 0;
}
.design-view__close:hover,
.design-view__close:focus-visible {
  color: #000;
  outline: none;
}
.plan-drawer.is-open .plan-drawer__panel,
.map-drawer.is-open .map-drawer__panel,
.contact-drawer.is-open .contact-drawer__panel,
.design-drawer.is-open .design-drawer__panel,
.progress-drawer.is-open .progress-drawer__panel,
.media-drawer.is-open .media-drawer__panel {
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .plan-drawer__panel,
  .map-drawer__panel,
  .contact-drawer__panel,
  .design-drawer__panel,
  .progress-drawer__panel,
  .media-drawer__panel,
  .plan-drawer.is-closing-dissolve,
  .map-drawer.is-closing-dissolve,
  .contact-drawer.is-closing-dissolve,
  .design-drawer.is-closing-dissolve,
  .progress-drawer.is-closing-dissolve,
  .media-drawer.is-closing-dissolve {
    transition-duration: 0.01ms;
  }
}
.plan-drawer__frame,
.map-drawer__frame {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--wine);
}
/* Quick cream map test - match plan drawer shell */
.map-drawer,
.map-drawer__frame,
.map-drawer__panel {
  background: var(--cream);
}

/* Explore map / plan / design: hand touches to the tool (books lock pinch with pan-y). */
html.is-explore-gesture-unlock,
html.is-explore-gesture-unlock body,
body.is-map-drawer-open,
body.is-plan-drawer-open,
body.is-design-drawer-open {
  touch-action: none !important;
}
body.is-map-drawer-open .map-drawer,
body.is-map-drawer-open .map-drawer__panel,
body.is-map-drawer-open .map-drawer__frame,
body.is-plan-drawer-open .plan-drawer,
body.is-plan-drawer-open .plan-drawer__panel,
body.is-plan-drawer-open .plan-drawer__frame,
body.is-design-drawer-open .design-drawer,
body.is-design-drawer-open .design-drawer__panel,
body.is-design-drawer-open .design-view__frame {
  touch-action: none !important;
}
.map-drawer__frame,
.plan-drawer__frame,
.design-view__frame {
  touch-action: none;
}
/* Drawer open: keep html overflow-y:scroll (scrollbar never leaves).
   Lock the page by fixing body in place - no width compensation needed. */
html.is-drawer-open:not(.is-drawer-cream) {
  background: var(--wine);
}
html.is-drawer-open.is-drawer-cream {
  background: var(--cream);
}
body.is-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
/* Media drawer - film fills the drawer (browser viewport), stays in Explore layer */
.media-view {
  position: absolute;
  inset: 0;
  display: block;
  color: #fff;
  background: #0a0a0a;
}
.media-view__chrome {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  padding: clamp(1.25rem, 4vh, 2.5rem) var(--gutter) 0.75rem;
  pointer-events: none;
}
.media-view__chrome .media-view__close {
  pointer-events: auto;
}
.media-view__stage {
  position: absolute;
  inset: 0;
  margin: 0;
  background: #0a0a0a;
  overflow: hidden;
}
.media-view__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  overflow: hidden;
}
.media-view__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Soft top-left wash over the plate (YouTube chrome / corner glare) */
.media-view__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(10, 10, 10, 0.22) 0%,
    rgba(10, 10, 10, 0.1) 18%,
    rgba(10, 10, 10, 0.03) 36%,
    transparent 50%
  );
}
.media-view__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: #111;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.media-view__fallback[hidden] { display: none; }
.media-view__fallback:hover,
.media-view__fallback:focus-visible {
  color: #fff;
  outline: 1px solid rgba(247, 245, 239, 0.45);
  outline-offset: -1px;
}



/* Construction progress drawer - floor-plan chrome mirror + show-all */
#s12-programme .map-teaser {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}
.progress-view {
  --progress-muted: rgba(26, 20, 18, 0.42);
}
.progress-view .design-view__chrome {
  gap: 0.85rem;
}
.progress-fp__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: baseline;
}
.progress-fp__row-label {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--progress-muted);
}
.progress-fp__hero {
  min-width: 0;
}
.progress-fp__types {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.65rem 1.15rem;
  margin: 0;
}
.progress-fp__types button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0.05rem 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: rgba(26, 20, 18, 0.38);
  font: inherit;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.progress-fp__types button:hover,
.progress-fp__types button:focus-visible {
  color: rgba(26, 20, 18, 0.72);
  outline: none;
}
.progress-fp__types button.is-on {
  color: #1a1412;
  border-bottom-color: #1a1412;
}
.progress-fp__payoff {
  display: block;
  margin-top: 0.65rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  letter-spacing: 0;
  color: rgba(26, 20, 18, 0.78);
  transform: translateY(0);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.progress-fp__payoff.is-swap {
  opacity: 0;
  transform: translateY(0.28rem);
}
.progress-fp__switches {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
}
.progress-fp__levels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.15rem;
  min-width: 0;
}
.progress-fp__levels button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0.2rem 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: #000;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.25s ease, opacity 0.25s ease;
}
.progress-fp__levels button:hover,
.progress-fp__levels button:focus-visible {
  color: #000;
  border-bottom-color: rgba(0, 0, 0, 0.45);
  outline: none;
}
.progress-fp__levels button.is-on {
  color: #000;
  border-bottom-color: #000;
}
.progress-view .design-view__stage {
  top: clamp(9rem, 20vh, 11.5rem);
}
.progress-all {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: clamp(9rem, 20vh, 11.5rem);
  overflow: auto;
  padding: 0.35rem var(--gutter) 2rem;
  background: var(--cream);
  -webkit-overflow-scrolling: touch;
}
.progress-all__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.55rem;
}
.progress-all__card {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
}
.progress-all__card:hover,
.progress-all__card:focus-visible {
  outline: none;
  border: 0;
}
.progress-all__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.progress-view.is-all .design-view__tools #progress-zoom-in,
.progress-view.is-all .design-view__tools #progress-zoom-out,
.progress-view.is-all .design-view__tools #progress-zoom-reset,
.progress-view.is-all .design-view__tools #progress-prev-label,
.progress-view.is-all .design-view__tools #progress-next-label {
  display: none;
}
/*
 * All mode luxury motion:
 * Enter = stage soft-settles out, then cards cascade in.
 * Leave = whole grid fades as one plate (no reverse stagger) while stage blooms back.
 * Opacity + transform only - no visibility snaps.
 */
.design-view .progress-all {
  top: clamp(7.75rem, 17.5vh, 10.25rem);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.012);
  transform-origin: center top;
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.design-view.is-all .progress-all {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.design-view .design-view__stage {
  transform: scale(1);
  transform-origin: center center;
  transition:
    opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.design-view.is-all .design-view__stage {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985);
}
.design-view .design-view__bar {
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.design-view.is-all .design-view__bar {
  opacity: 0;
  pointer-events: none;
}
.design-drawer.is-open .design-view.is-all .design-view__readout,
.progress-drawer.is-open .design-view.is-all .design-view__readout,
.design-view.is-all .design-view__readout {
  opacity: 0 !important;
  pointer-events: none;
  transform: translateY(0);
}
.design-drawer.is-open .design-view:not(.is-all) .design-view__readout,
.progress-drawer.is-open .design-view:not(.is-all) .design-view__readout {
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.18s,
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
}
.design-view .progress-all__card {
  opacity: 0;
  transform: translateY(0.55rem) scale(0.98);
  transition:
    opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.design-view.is-all.is-all-in .progress-all__card {
  opacity: 1;
  transform: none;
}
/* Leave: freeze cards so only the plate crossfades - keeps exit luxurious, not stepped. */
.design-view .progress-all.is-exiting .progress-all__card {
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .design-view .progress-all,
  .design-view .design-view__stage,
  .design-view .design-view__bar,
  .design-view .progress-all__card {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    transform: none !important;
  }
  .design-view .progress-all__card {
    opacity: 1;
  }
}
@media (max-width: 720px) {
  .progress-fp__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .progress-fp__types button {
    font-size: clamp(1.2rem, 5.5vw, 1.5rem);
  }
}

/* Design gallery - cream plan-viewer chrome inside design drawer */
.design-view {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--cream, #f7f5ef);
  color: var(--ink-dark, #1a1412);
  outline: none;
}
.design-view__chrome,
.design-view__readout {
  opacity: 0;
  transform: translateY(0.25rem);
  transition:
    opacity 0.7s cubic-bezier(0.32, 0.72, 0, 1) 0.18s,
    transform 0.75s cubic-bezier(0.32, 0.72, 0, 1) 0.18s;
}
.design-drawer.is-open .design-view__chrome,
.design-drawer.is-open .design-view__readout,
.progress-drawer.is-open .design-view__chrome,
.progress-drawer.is-open .design-view__readout,
.design-drawer.is-closing .design-view__chrome,
.design-drawer.is-closing .design-view__readout,
.progress-drawer.is-closing .design-view__chrome,
.progress-drawer.is-closing .design-view__readout {
  opacity: 1;
  transform: translateY(0);
}
.design-drawer.is-closing .design-view__chrome,
.design-drawer.is-closing .design-view__readout,
.progress-drawer.is-closing .design-view__chrome,
.progress-drawer.is-closing .design-view__readout {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .design-view__chrome,
  .design-view__readout {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    opacity: 1;
    transform: none;
  }
}
.design-view__chrome {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  right: var(--gutter);
  top: clamp(1.25rem, 4vh, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  pointer-events: none;
  /* Close X = right page border - chrome tools must not sit past this edge */
  max-width: 100%;
  box-sizing: border-box;
}
.design-view__chrome button { pointer-events: auto; }
.design-view__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.design-view__main { min-width: 0; flex: 1 1 auto; }
.design-view__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Hard ink on cream - never inherit body white / never rely on missing tokens */
  color: #1a1412;
}
.design-view__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1.25rem;
  min-width: 0;
}
.design-view__aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem 1.1rem;
}
.design-view__stage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: clamp(7.75rem, 17.5vh, 10.25rem);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(1.25rem, 4vh, 2.5rem) clamp(0.75rem, 2vw, 1.25rem) clamp(5.5rem, 12vh, 7.5rem);
  background: var(--cream);
}
.design-view__nav {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.design-view__nav svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.design-view__nav:hover,
.design-view__nav:focus-visible {
  color: #000;
  outline: none;
  opacity: 0.55;
}
.design-view__nav:disabled {
  opacity: 0.48; /* idle on cream - was 0.22 too light */
  cursor: default;
}
.design-view__frame {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  cursor: default;
}
.design-view__frame.is-zoomed { cursor: grab; }
.design-view__frame.is-panning { cursor: grabbing; }
.design-view__img {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  max-width: min(100%, 52rem);
  max-height: min(100%, 58vh);
  width: auto;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  pointer-events: none;
  /* Soft crossfade - longer settle so slide + copy feel composed */
  transition:
    opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.design-view__img.is-live {
  opacity: 1;
  pointer-events: auto;
}
.design-view__frame.is-panning .design-view__img,
.design-view__frame.is-instant .design-view__img {
  transition: none;
}
.design-view__readout-label,
.design-view__readout-note {
  transform: translateY(0);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.design-view__readout.is-swap .design-view__readout-label,
.design-view__readout.is-swap .design-view__readout-note {
  opacity: 0;
  transform: translateY(0.28rem);
}
@media (prefers-reduced-motion: reduce) {
  .design-view__img { transition-duration: 0.01ms !important; }
}
.design-view__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.85rem;
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #000;
  pointer-events: auto;
}
.design-view__tools button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0.15rem 0;
  border: 0;
  background: transparent;
  color: #000;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.design-view__tools button:hover,
.design-view__tools button:focus-visible {
  color: #000;
  outline: none;
  opacity: 0.55;
}
.design-view__tools button:disabled {
  opacity: 0.48; /* idle on cream - was 0.22 too light */
  cursor: default;
  color: #000;
}
.design-view__readout {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(1.25rem, 4vh, 2.75rem);
  max-width: 28rem;
  pointer-events: none;
}
.design-view__readout-label {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dark, #1a1412);
}
.design-view__readout-note {
  margin: 0;
  max-width: 26rem;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(26, 20, 18, 0.82);
}
/* Design Stories - native video + Explore-chrome controls (06/Aug/26)
   Cover fills the drawer (cinema) - contain left L/R black pillars on non-16:9 viewports. */
.media-view__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #0a0a0a;
  cursor: pointer;
}
.media-view__captions {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(4.75rem, 11vh, 6.75rem);
  z-index: 5;
  margin: 0;
  padding: 0 0.75rem;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
  color: #fff;
  font-family: var(--font-sans, "Helvetica Neue Web", Helvetica, Arial, sans-serif);
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-shadow:
    0 1px 2px rgba(10, 10, 10, 0.75),
    0 0 18px rgba(10, 10, 10, 0.35);
  white-space: pre-line;
}
.media-view__captions[hidden] {
  display: none !important;
}
.media-view__controls {
  --media-seek: 0%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: clamp(0.85rem, 2vw, 1.5rem);
  padding: 1.75rem var(--gutter) clamp(1.1rem, 3vh, 1.65rem);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(10, 10, 10, 0.28) 40%,
    rgba(10, 10, 10, 0.72) 100%
  );
  pointer-events: none;
}
.media-view__controls > * {
  pointer-events: auto;
}
.media-view__tools {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
  justify-self: end;
}
.media-view__ctrl {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  opacity: 0.7;
  font-family: var(--font-sans, "Helvetica Neue Web", Helvetica, Arial, sans-serif);
  font-size: calc(0.78rem - 1px);
  font-weight: 400;
  letter-spacing: var(--tracking-label, 0.1em);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  padding: 0.15rem 0;
  line-height: 1;
  transition: opacity 160ms ease;
}
.media-view__ctrl:hover,
.media-view__ctrl:focus-visible {
  opacity: 1;
  outline: none;
  text-decoration: none;
}
.media-view__ctrl[data-media-cc]:not(.is-off) {
  opacity: 1;
}
.media-view__ctrl.is-off {
  opacity: 0.35;
}
.media-view__ctrl.is-off:hover,
.media-view__ctrl.is-off:focus-visible {
  opacity: 0.75;
}
.media-view__seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 1.25rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.media-view__seek:focus-visible {
  outline: none;
}
.media-view__seek::-webkit-slider-runnable-track {
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(247, 245, 239, 0.92) 0%,
    rgba(247, 245, 239, 0.92) var(--media-seek, 0%),
    rgba(247, 245, 239, 0.28) var(--media-seek, 0%),
    rgba(247, 245, 239, 0.28) 100%
  );
}
.media-view__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
  transition: transform 160ms ease;
}
.media-view__seek:hover::-webkit-slider-thumb,
.media-view__seek:focus-visible::-webkit-slider-thumb {
  transform: scale(1.15);
}
.media-view__seek::-moz-range-track {
  height: 1px;
  background: rgba(247, 245, 239, 0.28);
  border: 0;
}
.media-view__seek::-moz-range-progress {
  height: 1px;
  background: rgba(247, 245, 239, 0.9);
  border: 0;
}
.media-view__seek::-moz-range-thumb {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
}
.media-view__time {
  flex: 0 0 auto;
  color: #fff;
  opacity: 0.55;
  font-family: var(--font-sans, "Helvetica Neue Web", Helvetica, Arial, sans-serif);
  font-size: calc(0.78rem - 1px);
  font-weight: 400;
  letter-spacing: var(--tracking-label, 0.1em);
  white-space: nowrap;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.media-view__frame iframe {
  display: none;
}
@media (max-width: 640px) {
  .media-view__controls {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "seek seek seek"
      "play time tools";
    row-gap: 0.65rem;
    column-gap: 0.85rem;
  }
  .media-view__controls [data-media-play] { grid-area: play; }
  .media-view__seek { grid-area: seek; }
  .media-view__time { grid-area: time; justify-self: start; }
  .media-view__tools { grid-area: tools; }
}