/* Colors and proportions from the supplied screenshot. */
html, body { max-width: 100%; }
.sec-nav { scrollbar-width: thin; }
.sec-btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
button:focus-visible { outline: 3px solid #008080; outline-offset: 3px; }
.scene { display: none; }
.tape { max-width: 64rem; background: #f3e6c9; }
.mast { background: #140e09; }
.shell, main.sheet, .dossier, .rail, .card > div { min-width: 0; }
.card p, .card h2, .dossier p { overflow-wrap: anywhere; }
.finder { flex-wrap: wrap; align-items: center; }
.finder input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.finder select { max-width: 100%; padding: .6rem; color: #1a120c; background: #f3e6c9; border: 1px solid #6a5644; border-radius: .25rem; font: inherit; }
.filter-label, .photo-filter { font-size: .8rem; }
.photo-filter { display: flex; align-items: center; gap: .4rem; }
.photo-filter input { width: auto; min-width: auto; }
[hidden] { display: none !important; }
body > .flex { height: 100dvh; overflow: hidden; }
body > .flex > header { flex-shrink: 0; }
body > .flex > ul { max-height: 9rem; flex-shrink: 0; overflow-y: auto; }
body > .flex > .grid { min-height: 0; }
body > .flex > .grid > .relative { min-width: 0; }
body > .flex > .grid > aside > ul:first-of-type button { display: block; }
body > .flex > .grid > aside > ul:first-of-type button span { display: block; }
body > .flex > .grid > aside > label,
body > .flex > .grid > aside > input { order: -4; }
body > .flex > .grid > aside > p { order: -3; }
body > .flex > .grid > aside > ul:last-of-type { order: -2; }
.dossier { overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  body > .flex > .grid { grid-template-rows: minmax(200px, 1fr) auto; }
  body > .flex > .grid > section { max-height: 34dvh; overflow-y: auto; }
  body > .flex > .grid > .relative > .flex { flex-shrink: 0; }
}
@media (min-width: 1024px) {
  body > .flex > .grid { grid-template-columns: 210px minmax(0,1fr) 320px; }
  body > .flex > .grid > aside { display: flex; }
  body > .flex > .grid > section { display: block; }
  body > .flex > .grid > .relative > .flex { display: none; }
}
@media (max-width: 759px) {
  main.sheet { display: grid; grid-template-columns: minmax(0, 1fr) !important; }
  main.sheet > * { grid-column: 1 / -1 !important; min-width: 0; max-width: 100%; }
  .shell > .rail { grid-row: 1; }
  .shell > main.sheet { grid-row: 2; }
  .shell > .dossier { grid-row: 3; }
  .dir, .clusters, .pair { grid-template-columns: minmax(0, 1fr) !important; }
  .hero, article, .finder, .years { min-width: 0; max-width: 100%; }
  .tape { transform: none; }
  .sec-nav { gap: .35rem; }
  .sec-btn { padding: .5rem .65rem; font-size: .68rem; }
  .filter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .finder .achados { flex-basis: 100%; }
}