:root {
  color-scheme: dark;
  color: #f4f4f4;
  background: #080808;
  font-family: Helvetica, Arial, sans-serif;
  --header-height: 58px;
  --media-height: calc(100vh - var(--header-height));
}
@supports (height: 100svh) { :root { --media-height: calc(100svh - var(--header-height)); } }
* { box-sizing: border-box; }
html { scroll-padding-top: var(--header-height); }
body { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, .reel-stage:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.top { height: var(--header-height); position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; gap: 16px; background: #080808; }
.brand { font-weight: 700; font-size: 11px; letter-spacing: .12em; text-decoration: none; white-space: nowrap; }
.view-switch { display: flex; align-items: center; gap: 22px; height: 100%; }
.view-switch a { display: flex; align-items: center; height: 100%; position: relative; color: #969696; text-decoration: none; font-size: 12px; }
.view-switch .is-active { color: white; }
.view-switch .is-active::after { content: ''; position: absolute; bottom: 9px; left: 0; right: 0; height: 2px; background: #fff; border-radius: 2px; }
.back { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: #aaa; text-decoration: none; font-size: 11px; }
.back svg { width: 17px; height: 17px; }
.gallery { display: grid; width: 100%; grid-template-columns: minmax(0,calc(var(--media-height) * .5620094192)) minmax(0,1fr); gap: 0; }
.reels { position: relative; min-width: 0; height: var(--media-height); }
.reel-stage { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: #080808; user-select: none; -webkit-user-select: none; touch-action: pan-x pinch-zoom; overscroll-behavior: contain; cursor: grab; }
.reel-stage:active { cursor: grabbing; }
.reel-track { position: absolute; inset: 0; will-change: transform; z-index: 0; }
.reel-panel { position: absolute; inset: 0; overflow: hidden; background: #080808; }
.reel-panel video, .reel-stage noscript video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.reel-stage::after { content: ''; position: absolute; inset: 62% 0 0; z-index: 1; background: linear-gradient(transparent,#0009); pointer-events: none; }
.reel-heading { position: absolute; z-index: 2; top: 22px; left: 22px; font-size: 18px; font-weight: 600; pointer-events: none; text-shadow: 0 1px 10px #0007; }
.reel-number { display: inline-block; margin-left: 8px; font-size: 10px; letter-spacing: .1em; font-weight: 400; opacity: .6; }
.reel-actions, .reel-nav { position: absolute; right: 14px; z-index: 2; display: flex; flex-direction: column; gap: 12px; }
.reel-actions { bottom: max(100px,calc(80px + env(safe-area-inset-bottom))); }
.reel-nav { top: 42%; }
.reel-stage button { border: 0; width: 44px; height: 44px; padding: 10px; display: grid; place-items: center; border-radius: 50%; background: #0005; color: #fff; touch-action: manipulation; }
.reel-stage button svg { width: 24px; height: 24px; }
@media (hover: hover) { .reel-stage button:hover { background: #0009; } }
.reel-sound { position: relative; }
.reel-sound.is-muted::after { content: ''; position: absolute; width: 27px; height: 2px; transform: rotate(-45deg); background: #fff; border-radius: 2px; }
.reel-caption { position: absolute; z-index: 2; bottom: max(24px,calc(16px + env(safe-area-inset-bottom))); left: 22px; right: 76px; display: flex; flex-direction: column; gap: 9px; text-shadow: 0 1px 8px #0009; }
.reel-caption strong { font-size: 14px; letter-spacing: -.02em; }
.reel-caption a { align-self: flex-start; font-size: 11px; text-decoration: none; color: #e0e0e0; padding: 8px 0; min-height: 32px; }
.reel-stage .reel-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; width: 60px; height: 60px; opacity: 0; pointer-events: none; transition: opacity .15s; background: #0006; }
.reel-play .play-icon { display: none; }
.is-paused .reel-play, .needs-play .reel-play, .reel-stage .reel-play:focus-visible { opacity: 1; pointer-events: auto; }
.is-paused .play-icon, .needs-play .play-icon { display: block; }
.is-paused .pause-icon, .needs-play .pause-icon { display: none; }
.reel-feedback { position: absolute; z-index: 4; top: 35%; left: 18px; right: 18px; text-align: center; pointer-events: none; font-size: 12px; text-shadow: 0 1px 8px #000; }
.reel-feedback:empty { display: none; }
.reel-progress { position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; height: 2px; background: #ffffff20; pointer-events: none; }
.reel-progress span { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.photo-panel { display: contents; }
figure { margin: 0; min-width: 0; position: relative; }
.portrait { height: var(--media-height); overflow: hidden; }
.photo-link { display: block; width: 100%; height: 100%; }
.photo-link picture { display: block; width: 100%; height: 100%; }
.photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Show the portrait portion of the supplied composite here. Its full original
   stays one click away; the office photograph has its own full-width row. */
.wide { grid-column: 1 / -1; scroll-margin-top: var(--header-height); }
.wide .photo { height: auto; }
.photo-info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 48px 24px 20px; background: linear-gradient(transparent,#0008); font-size: 11px; color: #fff; pointer-events: none; }
.photo-info span { text-shadow: 0 1px 5px #000; }
.download { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; pointer-events: auto; }
.photo-end { grid-column: 1 / -1; margin: 0; padding: 22px 24px; color: #777; font-size: 10px; letter-spacing: .08em; }
.reel-stage:fullscreen { width: 100vw; height: 100vh; height: 100dvh; touch-action: none; }
.reel-stage:fullscreen .reel-panel video { object-fit: contain; }

@media (max-width: 900px) {
  :root { --header-height: calc(56px + env(safe-area-inset-top)); --media-height: calc(100vh - var(--header-height)); }
  @supports (height: 100svh) { :root { --media-height: calc(100svh - var(--header-height)); } }
  @supports (height: 100dvh) { :root { --media-height: calc(100dvh - var(--header-height)); } }
  html, body { width: 100%; height: 100%; overflow: hidden; }
  .top { position: relative; padding: env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left)); gap: 12px; }
  .brand { font-size: 9px; letter-spacing: .07em; }
  .view-switch { gap: 18px; }
  .view-switch a { font-size: 12px; }
  .back { width: 32px; justify-content: center; }
  .back span { display: none; }
  main { height: var(--media-height); }
  .gallery { display: flex; height: 100%; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gallery::-webkit-scrollbar, .photo-panel::-webkit-scrollbar { display: none; }
  .reels, .photo-panel { flex: 0 0 100%; width: 100%; height: 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .photo-panel { display: block; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .reel-nav, .reel-full { display: none !important; }
  .reel-stage:fullscreen .reel-full { display: grid !important; }
  .reel-heading { top: 18px; left: 20px; font-size: 17px; }
  .reel-actions { right: max(12px,env(safe-area-inset-right)); }
  .reel-caption { left: 20px; }
  .portrait { height: auto; overflow: visible; }
  .photo-link, .photo-link picture { height: auto; }
  .photo { height: auto; object-fit: initial; }
  .photo-info { position: relative; align-items: center; background: #080808; padding: 3px 16px 5px; font-size: 10px; }
  .wide { scroll-margin-top: 0; }
  .photo-end { padding: 24px 16px max(24px,env(safe-area-inset-bottom)); font-size: 9px; }
}
@media (max-height: 500px) {
  .reel-heading { top: 12px; }
  .reel-actions { bottom: 14px; gap: 4px; }
  .reel-nav { top: 25%; }
  .reel-caption { bottom: 12px; gap: 3px; }
}
@media (max-width: 900px) and (orientation: landscape) { .reel-panel video { object-fit: contain; } }
@media (prefers-reduced-motion: reduce) { .reel-stage .reel-play { transition: none; } }