.about-lab { background: #ffeed9; color: #0f3438; padding: clamp(32px, 5vw, 64px) clamp(16px, 4vw, 40px); }
.about-shell { max-width: 1080px; margin: auto; }
.gallery-review { margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1px solid #d7c8b3; }
.review-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #466968; }
.review-heading a { text-decoration: underline; text-underline-offset: 4px; }
.review-heading a:hover { color: #820525; }
.variant-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.variant-picker a { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #b7c5b9; border-radius: 8px; font-size: 13px; font-weight: 700; color: #0f3438; }
.variant-picker a span { opacity: .65; font-size: 11px; }
.variant-picker a:hover { border-color: #0f3438; color: #0f3438; }
.variant-picker a[aria-current="true"] { border-color: #0f3438; background: #0f3438; color: #fdc55e; }
#variation-summary { font-size: 12px; line-height: 1.6; color: #466968; }
.variant-frame { border: 2px solid #3f7a80; border-radius: 16px; overflow: hidden; background: #ffeed9; scroll-margin-top: 150px; }
.variant-frame:not([hidden]) ~ .variant-frame:not([hidden]) { margin-top: 56px; }
.variant-frame[hidden] { display: none; }
.variant-start { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 24px; color: #ffeed9; background: #0b2a2e; border-bottom: 4px solid #fdc55e; }
.variant-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a9d6db; }
.variant-start h2 { margin-top: 6px; font-family: Archivo, sans-serif; font-size: clamp(20px, 2.5vw, 28px); }
.variant-photo-count { border: 1px solid #fdc55e; border-radius: 999px; padding: 6px 12px; color: #fdc55e; font-size: 13px; white-space: nowrap; }
.variant-frame .about-version { padding: clamp(20px, 3vw, 32px); }
.variant-end { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 24px; border-top: 1px solid #b7c5b9; background: #e7ddca; color: #173b3e; font-size: 12px; }
.variant-end strong { text-transform: uppercase; letter-spacing: .07em; }
.variant-end a { text-decoration: underline; text-underline-offset: 3px; }
.variant-end a:hover { color: #820525; }
.about-version { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: 'heading first' 'photos second'; gap: 22px clamp(24px, 4vw, 56px); align-items: start; }
.about-version[hidden], .film-controls[hidden], .photo-thumbnails[hidden] { display: none; }
.about-heading { grid-area: heading; }
.about-heading h3 { font-family: Archivo, sans-serif; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; font-stretch: 112%; text-transform: uppercase; line-height: 1; }
.about-heading > p { margin-top: 10px; font-size: 18px; font-weight: 600; color: #7a4b1e; max-width: 28ch; line-height: 1.45; }
.people-first { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; padding: 8px 13px; background: #fdc55e; color: #0f3438; border: 1px solid #dcad50; border-radius: 6px; font: 700 clamp(13px, 1.5vw, 16px)/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; box-shadow: 3px 3px 0 #820525; }
.people-first b { font: inherit; font-size: 1.4em; color: #820525; }
.about-copy { font-size: 18px; line-height: 1.6; color: #1d3236; }
.about-copy-first { grid-area: first; }
.about-copy-second { grid-area: second; }
.about-photos { grid-area: photos; min-width: 0; }
.photo-card { min-width: 0; }
.photo-open { display: block; position: relative; overflow: hidden; border-radius: 10px; background: #173b3e; }
.photo-open img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.photo-open:hover img { transform: scale(1.02); }
.photo-zoom { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #0f3438; background: #ffeed9ed; font-size: 18px; }
.photo-card figcaption { padding-top: 6px; font-size: 11px; font-weight: 500; line-height: 1.4; color: #526761; }
.photo-note { margin-top: 24px; font-size: 11px; line-height: 1.6; color: #7a4b1e; }
.inline-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.inline-mosaic .photo-card img { aspect-ratio: 3 / 2; object-fit: cover; }
.layout-faixa { grid-template-areas: 'heading first' 'heading photos' 'heading second'; }
.photo-film { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: #0f3438 #e6d5bf; scrollbar-width: thin; padding-bottom: 10px; }
.photo-film:focus-visible { outline: 3px solid #399ba8; outline-offset: 4px; }
.film-slide { flex: 0 0 88%; scroll-snap-align: start; }
.film-slide img { width: 100%; height: clamp(180px, 20vw, 240px); object-fit: contain; }
.film-controls, .lightbox-controls { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 8px; }
.film-controls button, .lightbox-controls button { width: 40px; height: 40px; border: 1px solid #98aaa1; border-radius: 50%; background: transparent; color: #0f3438; font-size: 22px; cursor: pointer; }
.film-controls button:hover { color: #ffeed9; background: #0f3438; }
.film-controls button:disabled { opacity: .3; cursor: default; color: #0f3438; background: transparent; }
[data-film-status], [data-photo-status] { font-size: 12px; font-variant-numeric: tabular-nums; }
.inline-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 8px 10px; }
.memory-print { position: relative; padding: 7px 7px 12px; background: #fffaf2; box-shadow: 0 4px 12px #50251225; transform: rotate(-4deg); }
.memory-print:nth-child(even) { transform: rotate(4deg); }
.memory-print .photo-open { border-radius: 2px; }
.memory-print img { aspect-ratio: 3 / 2; object-fit: cover; }
.memory-print:focus-within { z-index: 2; }
.layout-mural .people-first { transform: rotate(-3deg); }
.spotlight-main figcaption { min-height: 2em; }
.photo-thumbnails { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.photo-thumbnails a { display: block; padding: 3px; border: 2px solid transparent; border-radius: 6px; cursor: pointer; background: transparent; opacity: .65; }
.photo-thumbnails a[aria-current="true"] { border-color: #820525; opacity: 1; }
.photo-thumbnails a:hover { opacity: 1; }
.photo-thumbnails img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.film-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.film-overview img { aspect-ratio: 3 / 2; object-fit: cover; }
.film-overview .photo-open { border-radius: 5px; }
.spotlight-main img { aspect-ratio: 3 / 2; object-fit: contain; }
.photo-dialog { margin: auto; padding: 18px; width: min(1200px, calc(100% - 24px)); max-height: calc(100dvh - 24px); border: 1px solid #3f7a80; border-radius: 16px; background: #0b2a2e; color: #ffeed9; }
.photo-dialog::backdrop { background: #031b20eb; }
.photo-dialog form { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.photo-close { padding: 10px 16px; background: #fdc55e; color: #0f3438; border-radius: 999px; cursor: pointer; font-weight: 700; }
.photo-dialog figure img { display: block; width: 100%; height: min(65dvh, 750px); object-fit: contain; }
.photo-dialog figcaption { padding: 12px 0; font-size: 14px; text-align: center; }
.lightbox-controls { justify-content: center; }
.lightbox-controls button { color: #ffeed9; }
.lightbox-controls button:hover { color: #0f3438; background: #fdc55e; }
@media (max-width: 760px) {
  .variant-frame { scroll-margin-top: 16px; }
  .variant-frame:not([hidden]) ~ .variant-frame:not([hidden]) { margin-top: 36px; }
  .variant-start, .variant-end { padding: 16px; }
  .variant-frame .about-version { padding: 20px 16px; }
  .about-version { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'heading' 'photos' 'first' 'second'; gap: 24px; }
  .layout-faixa { grid-template-areas: 'heading' 'first' 'photos' 'second'; }
  .variant-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variant-picker a { padding: 10px 8px; font-size: 12px; }
  .about-copy { font-size: 17px; }
  .inline-wall { max-width: 480px; margin: 0 auto; }
  .film-slide img { height: auto; aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) { .photo-open img { transition: none; } }