/* World Atlas — a quiet, living contact sheet. */
.atlas-page { --gutter:clamp(20px,3.2vw,64px); background:#0c171a; }
.atlas-page .masthead { height:72px; position:relative; background:#0c171a; }
.atlas-page .primary-nav { gap:28px; }
.atlas-home { font:10px var(--mono); letter-spacing:.04em; color:var(--muted); white-space:nowrap; }
.atlas-home span { color:var(--amber); margin-left:14px; }
.atlas-main { min-height:calc(100svh - 72px); display:flex; flex-direction:column; padding:0 var(--gutter); }
.atlas-intro { display:flex; align-items:center; justify-content:space-between; gap:36px; padding:26px 0 24px; }
.atlas-intro .eyebrow { color:var(--amber); font-size:8px; letter-spacing:.17em; margin-bottom:10px; }
.atlas-intro h1 { font-size:clamp(36px,3.8vw,64px); line-height:1.05; letter-spacing:-.05em; }
.atlas-intro h1 i { color:#b6c7bd; letter-spacing:-.055em; }
.atlas-intro-copy { display:flex; gap:24px; align-items:center; }
.atlas-intro-copy p { font-size:12px; line-height:1.8; color:#96a7a4; }
.atlas-edition { border-left:1px solid var(--line); padding-left:24px; font:9px/1.9 var(--mono); color:#81948e; letter-spacing:.07em; }
.atlas-edition b { display:block; color:var(--ink); font-weight:400; }
.atlas-toolbar { min-height:45px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.atlas-filters { display:flex; align-items:center; gap:22px; }
.atlas-filters button { border:0; padding:14px 0; background:none; color:#889b95; font-size:10px; position:relative; white-space:nowrap; }
.atlas-filters button[aria-pressed="true"] { color:var(--ink); }
.atlas-filters button[aria-pressed="true"]::after { content:''; height:1px; background:var(--amber); position:absolute; bottom:-1px; left:0; right:0; }
.atlas-filters small { font:8px var(--mono); color:#7f978f; margin-left:5px; }
.atlas-playback { display:flex; align-items:center; gap:22px; }
.atlas-status { color:#9aafa6; font:8px var(--mono); letter-spacing:.08em; white-space:nowrap; }
.atlas-status::before { content:''; display:inline-block; width:4px; height:4px; background:#acd0b7; border-radius:50%; margin-right:8px; vertical-align:2px; }
.atlas-page.is-paused .atlas-status::before { background:var(--amber); }
.atlas-toggle { display:flex; align-items:center; gap:8px; border:0; padding:10px 0 10px 18px; border-left:1px solid var(--line); background:none; font-size:10px; white-space:nowrap; }
.atlas-toggle span:first-child { color:var(--amber); font-size:11px; width:12px; text-align:center; }
.atlas-wall { flex:1; display:flex; flex-direction:column; justify-content:center; padding:18px 0; }
.atlas-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px 14px; }
.scene-card { min-width:0; margin:0; position:relative; outline-offset:4px!important; }
.scene-card[hidden] { display:none; }
.scene-media-frame { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#070f12; border:1px solid #c5d4bf18; transition:border-color .3s; }
/* Preserve the entire source frame, including the taller capture recording. */
.scene-media-frame video { display:block; width:100%; height:100%; object-fit:contain; }
.scene-veil { position:absolute; inset:0; pointer-events:none; background:rgba(12,23,26,.43); transition:opacity .4s ease; }
.scene-card:hover .scene-veil,.scene-card:focus-visible .scene-veil,.scene-card.is-revealed .scene-veil { opacity:0; }
.scene-card:hover .scene-media-frame,.scene-card:focus-visible .scene-media-frame,.scene-card.is-revealed .scene-media-frame { border-color:#d7ae7299; }
.scene-card figcaption { display:flex; align-items:baseline; gap:7px; padding-top:9px; line-height:1.3; }
.scene-number { font:8px var(--mono); color:#77928a; }
.scene-title { font-size:11px; font-weight:400; letter-spacing:0; line-height:1.3; color:#b7c5be; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scene-version { margin-left:auto; color:#769087; font:7px var(--mono); white-space:nowrap; letter-spacing:.03em; }
.scene-card:hover .scene-title,.scene-card:focus-visible .scene-title,.scene-card.is-revealed .scene-title { color:#f1efe5; }
.scene-error { position:absolute; inset:0; display:grid; place-content:center; padding:12px; text-align:center; background:#0c171acc; font:10px/1.7 var(--mono); color:var(--amber); }
.scene-error[hidden] { display:none; }
.atlas-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; border-top:1px solid var(--line); font:8px/1.5 var(--mono); letter-spacing:.07em; color:#7f968c; }
.atlas-footer .hover-hint { color:#b8c5b9; }
.atlas-footer .hover-hint span { color:var(--amber); margin-right:7px; }
.atlas-noscript { padding:15px 0; color:var(--amber); font-size:12px; }
@media (min-width:1001px) and (min-height:850px) {
  .atlas-intro { padding-top:34px; padding-bottom:30px; }
  .atlas-grid { gap:24px 18px; }
  .atlas-wall { padding:24px 0; }
}
@media (min-width:1001px) and (max-height:710px) {
  .atlas-page .masthead { height:60px; }
  .atlas-main { min-height:calc(100svh - 60px); }
  .atlas-intro { padding:16px 0; }
  .atlas-intro h1 { font-size:36px; }
  .atlas-grid { gap:10px 14px; }
  .atlas-wall { padding:12px 0; }
  .scene-media-frame { aspect-ratio:auto; height:clamp(64px,calc((100svh - 280px)/3),160px); }
}
@media (max-width:1000px) {
  .atlas-page .primary-nav { gap:17px; }
  .atlas-page .masthead { gap:20px; }
  .atlas-home { display:none; }
  .atlas-intro-copy { display:none; }
  .atlas-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .atlas-status { display:none; }
}
@media (max-width:760px) {
  .atlas-page .masthead { height:64px; }
  .atlas-page .primary-nav { gap:20px; }
  .atlas-page .primary-nav a { display:none; }
  .atlas-page .primary-nav .atlas-nav-link { display:block; }
  .atlas-main { min-height:calc(100svh - 64px); }
  .atlas-intro { padding:26px 0 23px; }
  .atlas-intro h1 { font-size:clamp(34px,6.5vw,47px); }
  .atlas-intro .eyebrow { font-size:7px; }
  .atlas-toolbar { flex-wrap:wrap; gap:0; }
  .atlas-filters { gap:0 18px; width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .atlas-filters button { font-size:10px; }
  .atlas-playback { width:100%; justify-content:space-between; border-top:1px solid #c5d4bf16; padding:3px 0; }
  .atlas-status { display:block; font-size:7px; }
  .atlas-toggle { padding:9px 0 9px 14px; }
  .atlas-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
  .scene-version { font-size:6px; }
  .scene-title { font-size:10px; }
  .scene-card figcaption { flex-wrap:wrap; gap:4px; }
  .scene-title { flex:1; }
  .scene-version { padding-left:15px; flex-basis:100%; }
  .atlas-footer { flex-wrap:wrap; gap:10px; padding:16px 0; font-size:7px; }
  .atlas-footer .hover-hint { order:-1; width:100%; }
}
@media (prefers-reduced-motion:reduce) { .scene-veil { transition:none; } }
@media (max-width:380px) {
  .atlas-filters { gap:0 14px; }
  .atlas-filters button { font-size:9px; }
  .atlas-filters small { margin-left:3px; font-size:7px; }
}


/* Fit all eighteen distinct scenes into a desktop viewport. */
@media (min-width:1001px) {
  .atlas-main { height:calc(100svh - 72px); min-height:540px; }
  .atlas-intro { padding:20px 0; }
  .atlas-intro h1 { font-size:clamp(36px,3.4vw,58px); }
  .atlas-wall { min-height:0; padding:16px 0; }
  .atlas-grid { flex:1; min-height:0; grid-template-rows:repeat(3,minmax(0,1fr)); gap:16px; }
  .scene-card { min-height:0; display:grid; grid-template-rows:minmax(0,1fr) 23px; }
  .scene-media-frame { aspect-ratio:auto; height:100%; }
}
@media (min-width:1001px) and (max-height:710px) {
  .atlas-main { height:calc(100svh - 60px); }
  .atlas-intro { padding:12px 0; }
  .atlas-intro h1 { font-size:36px; }
  .atlas-grid { gap:12px 16px; }
  .atlas-wall { padding:12px 0; }
}
@media (min-width:761px) and (max-width:1000px) {
  .atlas-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}