/* v14: a quiet film viewer, with precision confined to its controls.
   Cool white / graphite / slate; existing editorial fonts and full stills.
   Load after style.css. All overrides require body.nano-experience. */

.nano-experience {
  --day: #f6f8fa;
  --white: #fff;
  --soft: #edf1f4;
  --ink: #20262e;
  --slate: #626f7a;
  --line: rgba(32, 38, 46, .14);
  --experience-focus: #425e76;
  --experience-active: #42566b;
  --gutter: clamp(24px, 3.2vw, 56px);
  background: var(--day);
}

/* Two meaningful disciplines, with the quieter editorial links alongside. */
.nano-experience .site-header {
  height: auto;
  min-height: 104px;
  gap: 24px;
  padding: 18px max(40px, calc((100vw - 1440px) / 2));
  border-bottom: 1px solid rgba(32, 38, 46, .08);
  background: rgba(246, 248, 250, .96);
}
@supports (backdrop-filter: blur(12px)) {
  .nano-experience .site-header {
    background: rgba(246, 248, 250, .88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
.nano-experience .signature { min-height: 44px; }
.nano-experience .identity-role { margin-right: auto; }
.nano-experience .site-header nav.site-navigation[data-nav] {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  margin-left: auto;
}
.nano-experience .discipline-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .64);
}
.nano-experience .secondary-navigation {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.nano-experience .site-navigation a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  color: var(--slate);
  transition: background-color 140ms ease, color 140ms ease;
}
.nano-experience .site-navigation a:hover {
  background: #e7edf2;
  color: var(--ink);
  text-decoration: none;
}
.nano-experience .discipline-switch a[aria-current='page'] {
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
}
.nano-experience .secondary-navigation a[aria-current='page'] {
  background: #e7edf2;
  color: var(--ink);
  text-decoration: none;
}
.nano-experience .language {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 0 8px 18px;
  font-size: 12px;
}
.nano-experience :is(a, button):focus-visible {
  outline: 2px solid var(--experience-focus);
  outline-offset: 4px;
}

/* The film remains the largest element. No fixed crop or image transform. */
.nano-experience .opening {
  width: min(calc(100% - 80px), 1360px);
  margin-top: 38px;
}
.nano-experience .hero-frame { min-width: 0; }
.nano-experience .hero-film picture,
.nano-experience .work-piece figure { background: transparent; }
.nano-experience .hero-film img,
.nano-experience .work-piece img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: none;
}
.nano-experience .frame-caption { padding-top: 21px; }
.nano-experience .frame-caption h2 { font-size: 30px; }
.nano-experience :is(.frame-caption, .card-caption) > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
.nano-experience :is(.hero-play, .reel-link, .quiet-link, .frame-explore, .caption-action) {
  min-height: 44px;
}
.nano-experience :is(.frame-explore, .caption-action) {
  display: inline-flex;
  align-items: center;
}
.nano-experience .feature-note { gap: 16px 30px; padding-top: 8px; }
.nano-experience .selected,
.nano-experience .development { width: min(calc(100% - 80px), 1280px); }
.nano-experience .selected { padding-top: 110px; }
.nano-experience .page-films .placement-1 { width: 76%; max-width: 970px; }
.nano-experience .page-films .placement-2 { width: 74%; max-width: 950px; }
.nano-experience .page-films .placement-3 { width: 78%; max-width: 1000px; }
.nano-experience .page-films .placement-4 { width: 62%; max-width: 795px; }
.nano-experience .page-films .placement-5 { width: 74%; max-width: 945px; }
.nano-experience .page-films .placement-6 { width: 60%; max-width: 770px; }
.nano-experience .card-caption h3 { font-size: 28px; }

/* A small, tactile frame selector; all previews show their complete image. */
.nano-experience .frame-console {
  margin-top: 20px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
}
.nano-experience .frame-console-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
  color: var(--slate);
  font-size: 12px;
  line-height: 1.5;
}
.nano-experience :is(.frame-position, .gallery-position) {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nano-experience .frame-track {
  display: flex;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
  padding: 5px 4px 9px;
  margin: 0 -4px;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #b7c3cd transparent;
  touch-action: pan-y;
}
.nano-experience .frame-preview {
  display: block;
  flex: 0 0 116px;
  min-width: 44px;
  min-height: 44px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  scroll-snap-align: start;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.nano-experience .frame-preview img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.nano-experience .frame-preview:hover { background: #e7edf2; }
.nano-experience .frame-preview[aria-pressed='true'] {
  border-color: var(--experience-active);
  background: #e7edf2;
}
.nano-experience .frame-preview:focus-visible { outline-offset: 1px; }

/* Discovery is a quiet reading aid, with no timer, reward animation or overlay. */
.nano-experience .discovery-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(136px, 220px) auto;
  align-items: center;
  gap: 24px;
  margin-top: 26px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
  font: 12px/1.65 var(--sans);
  color: var(--slate);
}
.nano-experience .discovery-copy { min-width: 0; text-wrap: pretty; }
.nano-experience .discovery-track { display: flex; align-items: center; gap: 5px; }
.nano-experience .discovery-track > span {
  flex: 1 1 0;
  height: 3px;
  min-width: 0;
  border-radius: 1px;
  background: #d8e0e7;
}
.nano-experience .discovery-track > span[data-seen='true'] {
  background: var(--experience-active);
}
.nano-experience .discovery-reset {
  min-width: 60px;
  min-height: 44px;
  padding: 10px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--slate);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nano-experience .discovery-reset:hover { background: #e7edf2; color: var(--ink); }
.nano-experience .explored-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  color: var(--slate);
  font: 11px/1.6 var(--sans);
  white-space: nowrap;
}
.nano-experience .explored-mark::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--experience-active);
}
.nano-experience [data-film]:not([data-explored='true']) .explored-mark { display: none; }

/* Film-detail thumbnails replace the old dot controls, without framing the still. */
.nano-experience dialog { width: min(1360px, calc(100% - 48px)); }
.nano-experience :is(.close-button, .stills-return, .provider-link, .detail-next a) {
  min-height: 44px;
}
.nano-experience .gallery-bar {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding-block: 12px;
}
.nano-experience #gallery-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 260px;
  min-width: 0;
}
.nano-experience .gallery-thumbnails {
  display: flex;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 3px;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #b7c3cd transparent;
  touch-action: auto;
}
.nano-experience .gallery-thumbnails .gallery-dot {
  position: relative;
  flex: 0 0 88px;
  min-width: 44px;
  min-height: 60px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.nano-experience .gallery-thumbnails .gallery-dot::before { content: none; }
.nano-experience .gallery-thumbnails .gallery-dot img {
  width: 100%;
  height: 48px;
  object-fit: contain;
  pointer-events: none;
}
.nano-experience .gallery-thumbnails .gallery-dot span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 2px;
  background: rgba(32, 38, 46, .9);
  color: var(--white);
  font: 10px/18px var(--sans);
  font-variant-numeric: tabular-nums;
}
.nano-experience .gallery-thumbnails .gallery-dot:hover { background: #e7edf2; }
.nano-experience .gallery-thumbnails .gallery-dot[aria-pressed='true'] {
  border-color: var(--experience-active);
  background: #e7edf2;
}
.nano-experience .gallery-thumbnails .gallery-dot:focus-visible { outline-offset: 1px; }
.nano-experience .provider-link { display: inline-flex; align-items: center; margin-left: auto; }

@media (max-width: 1100px) {
  html:has(body.nano-experience) { scroll-padding-top: 148px; }
  .nano-experience .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    min-height: 0;
    gap: 10px 20px;
    padding: 15px 40px 10px;
  }
  .nano-experience .signature { grid-column: 1; grid-row: 1; }
  .nano-experience .identity-role { display: none; }
  .nano-experience .language { grid-column: 2; grid-row: 1; border: 0; padding: 8px; }
  .nano-experience .site-header nav.site-navigation[data-nav] {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-between;
    margin: 0;
  }
  .nano-experience .discovery-bar { grid-template-columns: minmax(0, 1fr) 140px auto; gap: 16px; }
}

@media (max-width: 680px) {
  html:has(body.nano-experience) { scroll-padding-top: 140px; }
  .nano-experience .site-header { gap: 8px 12px; padding: 12px 16px 8px; }
  .nano-experience .signature h1 { font-size: 22px; }
  .nano-experience .site-header nav.site-navigation[data-nav] { gap: 8px; }
  .nano-experience .secondary-navigation { gap: 2px; }
  .nano-experience .site-navigation a { padding: 10px 8px; font-size: 11px; }
  .nano-experience .language { font-size: 11px; }
  .nano-experience .opening,
  .nano-experience .selected,
  .nano-experience .development { width: calc(100% - 32px); }
  .nano-experience .opening { margin-top: 25px; }
  .nano-experience .frame-caption { padding-top: 15px; }
  .nano-experience .frame-caption h2 { font-size: 26px; }
  .nano-experience :is(.frame-caption, .card-caption) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px;
  }
  .nano-experience :is(.frame-caption, .card-caption) .explored-mark {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .nano-experience .feature-note { gap: 6px 22px; padding-top: 7px; }
  .nano-experience .feature-credit { width: 100%; }
  .nano-experience .frame-console { margin-top: 13px; padding-top: 14px; }
  .nano-experience .frame-console-top { gap: 14px; font-size: 11px; }
  .nano-experience .frame-track { gap: 7px; }
  .nano-experience .frame-preview { flex-basis: clamp(86px, 26vw, 124px); }
  .nano-experience .discovery-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 16px;
    margin-top: 20px;
    padding-block: 12px;
    font-size: 11px;
  }
  .nano-experience .discovery-copy { grid-column: 1 / -1; }
  .nano-experience .discovery-track { min-height: 44px; }
  .nano-experience .discovery-reset { font-size: 11px; }
  .nano-experience .selected { padding-top: 76px; }
  .nano-experience .page-films .placement-1 { width: 100%; max-width: none; margin-left: 0; }
  .nano-experience .page-films .placement-2 { width: 96%; max-width: none; }
  .nano-experience .page-films .placement-3 { width: 96%; max-width: none; }
  .nano-experience .page-films .placement-4 { width: 94%; max-width: none; }
  .nano-experience .page-films .placement-5 { width: 100%; max-width: none; margin-left: 0; }
  .nano-experience .page-films .placement-6 { width: 91%; max-width: none; }
  .nano-experience .card-caption h3 { font-size: 25px; }
  .nano-experience dialog { width: 100%; }
  .nano-experience .gallery-bar { gap: 5px 15px; }
  .nano-experience #gallery-controls { flex-basis: 100%; }
  .nano-experience .gallery-thumbnails .gallery-dot { flex-basis: 78px; min-height: 56px; }
  .nano-experience .gallery-thumbnails .gallery-dot img { height: 44px; }
  .nano-experience .provider-link { max-width: min(220px, 68%); font-size: 11px; overflow-wrap: anywhere; }
}

@media (hover: hover) and (pointer: fine) {
  .nano-experience .frame-track { cursor: grab; }
  .nano-experience .frame-track:active { cursor: grabbing; }
}
@media (min-width: 681px) {
  .nano-experience :is(.frame-caption, .card-caption) .explored-mark { order: 1; margin-left: auto; }
  .nano-experience :is(.frame-explore, .caption-action) { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .nano-experience *, .nano-experience *::before, .nano-experience *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .nano-experience .frame-track { scroll-snap-type: none; }
}