/* Shared archive components. Attraction-specific compatibility CSS remains
   temporarily while visual parity is verified. */
.archive-global-support { margin-top: 32px; margin-bottom: 32px; }
.archive-support-card { text-align: left; }
.archive-support-card p { max-width: 78ch; }
.archive-support-card .button { margin-top: 8px; }

/* Canonical archive action-row layout.
   Support and submission CTAs intentionally use the same spacing. */
.archive-submission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

/* Canonical archive submission component.
   Shared by all current and future archive pages. */
body .archive-submit-panel {
  margin-top: 28px;
  padding: 26px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.09),
    rgba(255,255,255,.035)
  );
}

body .archive-submit-panel > h3 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -.04em;
}

body .archive-submit-panel > p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

body .archive-submission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

body .archive-submission-box {
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
}

body .archive-submission-box p {
  margin: 0;
}

body .archive-submission-box h3 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -.02em;
}

body .archive-submission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

@media (max-width: 980px) {
  body .archive-submission-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body .archive-submit-panel {
    border-radius: 24px;
  }
}

/* Canonical archive fragment navigation.
   Archive pages use deterministic fragment jumps because long archive
   documents make native smooth scrolling slow and visually unreliable.
   Sticky-header clearance remains owned by html scroll-padding-top.
   Archive destination IDs belong on outer section boundaries. */
html {
  scroll-behavior: auto !important;
}

body section[id] {
  scroll-margin-top: 0 !important;
}

section[id]:focus{outline:none}
.archive-card:focus-visible, section[id]:focus-visible { outline: 2px solid rgba(255,255,255,.65); outline-offset: 4px; }

.archive-jump-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.archive-photo-card img,
.archive-map-figure img { max-width: 100%; height: auto; }
.archive-card iframe,
.archive-card video { max-width: 100%; }

@media (max-width: 700px) {
  .archive-jump-links { gap: 10px; }
  .archive-jump-links a { width: 100%; justify-content: center; }
  .archive-facts,
  .archive-highlight-grid,
  .archive-deep-copy,
  .story-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-global-support *, .archive-global-support *::before, .archive-global-support *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

body.lightbox-open { overflow: hidden; }
.archive-lightbox { position:fixed; inset:0; z-index:10000; display:none; place-items:center; padding:20px; background:rgba(0,0,0,.94); }
.archive-lightbox.open { display:grid; }
.archive-lightbox-dialog { width:min(1180px,96vw); max-height:96vh; display:grid; place-items:center; gap:12px; overflow:auto; }
.archive-lightbox figure { margin:0; width:100%; display:grid; place-items:center; gap:8px; }
.archive-lightbox img { max-width:100%; max-height:72vh; width:auto; height:auto; object-fit:contain; border-radius:14px; }
.archive-lightbox figcaption { color:#fff; text-align:center; font-weight:800; max-width:900px; }
.archive-lightbox-count { color:rgba(255,255,255,.68); font-weight:700; font-size:14px; text-align:center; }
.archive-lightbox-controls { width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:10px; padding-bottom:4px; }
.archive-lightbox-controls button,
.archive-lightbox-controls a {
  min-height:52px; min-width:150px; padding:10px 20px; border:1px solid rgba(255,255,255,.28);
  background:#171717; color:#fff; border-radius:999px; font:800 16px/1.2 system-ui,-apple-system,sans-serif;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; text-align:center;
}
.archive-lightbox-controls button:hover,.archive-lightbox-controls a:hover { background:#242424; }
.archive-lightbox-controls button:focus-visible,.archive-lightbox-controls a:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.archive-global-support :is(h1,h2,h3,h4,h5,h6)[tabindex="-1"]:focus { outline:none; }
.archive-global-support :is(h1,h2,h3,h4,h5,h6)[tabindex="-1"]:focus-visible {
  outline:2px solid rgba(255,255,255,.9); outline-offset:6px; border-radius:4px;
}
@media(max-width:700px){
 .archive-lightbox{padding:10px}
 .archive-lightbox-dialog{width:100%;max-height:98vh}
 .archive-lightbox img{max-height:64vh}
 .archive-lightbox-controls{display:grid;grid-template-columns:1fr 1fr}
 .archive-lightbox-controls button,.archive-lightbox-controls a{min-width:0;width:100%;min-height:54px;padding:9px 12px}
}

/* Phase 20A: deterministic mobile lightbox control layout */
@media (max-width:700px) and (min-width:331px) {
  .archive-lightbox-controls {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    width:100%;
  }
  .archive-lightbox-controls > button,
  .archive-lightbox-controls > a {
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    min-height:54px;
    align-items:center;
    justify-content:center;
    white-space:normal;
  }
}
@media (max-width:330px) {
  .archive-lightbox-controls {
    display:grid !important;
    grid-template-columns:1fr !important;
  }
}

/* Phase 20N: hard-clip archive atmospheric pseudo-elements to each rounded card. */
.archive-card{
  overflow:hidden !important;
  isolation:isolate;
  contain:paint;
  background-clip:padding-box;
}
.archive-card::before,
.archive-card::after{
  max-width:100%;
  max-height:100%;
}

/* Archive Framework v1
   Canonical presentation for shared Facts, Status, and Explore components.
   These rules intentionally override legacy attraction-specific component CSS
   while visual parity is verified. */

body .archive-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px;
  margin-top: 30px;
  align-items: start;
}

body .archive-facts > .fact-box {
  height: auto;
  min-height: 0;
  align-self: start;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.07);
}

body .archive-facts .fact-label {
  color: var(--brand-two);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

body .archive-facts .fact-value {
  font-weight: 900;
  line-height: 1.35;
}

body .archive-status-panel,
body .archive-jump-panel {
  margin-top: 28px;
  padding: 26px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.09),
    rgba(255,255,255,.035)
  );
}

body .archive-status-panel h2,
body .archive-jump-panel h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -.04em;
}

body .archive-status-panel p,
body .archive-jump-panel p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

body .archive-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

body .archive-status-item {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
}

body .archive-status-label {
  color: var(--brand-two);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

body .archive-status-value {
  color: rgba(255,255,255,.90);
  font-weight: 900;
  line-height: 1.35;
}

body .archive-jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

body .archive-jump-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 900;
  transition: .25s ease;
}

body .archive-jump-links a:hover {
  transform: translateY(-2px);
  border-color: rgba(242,50,0,.45);
  color: #fff;
}

@media (max-width: 1100px) {
  body .archive-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  body .archive-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  body .archive-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  body .archive-facts {
    grid-template-columns: 1fr !important;
  }

  body .archive-status-panel,
  body .archive-jump-panel {
    border-radius: 24px;
  }

  body .archive-status-grid {
    grid-template-columns: 1fr;
  }

  body .archive-jump-links a {
    width: 100%;
  }
}