/* The plate: frame, marks, grid, target, hero, index, plate regions (card / full), colophon, mobile. */

/* ---- Sheet: the plate ground with hairline grid and four registration marks ---- */
.sheet {
  position: relative; min-height: 100vh; overflow: hidden;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  background-position: 0 0;
}
.mark { position: absolute; width: var(--mark); height: var(--mark); border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); pointer-events: none; z-index: 3; }
.mark.tl { left: var(--inset); top: var(--inset); }
.mark.tr { right: var(--inset); top: var(--inset); transform: rotate(90deg); }
.mark.bl { left: var(--inset); bottom: var(--inset); transform: rotate(-90deg); }
.mark.br { right: var(--inset); bottom: var(--inset); transform: rotate(180deg); }

/* ---- The monolith wordmark: above the grid, below the target glow and all text; enters from the right and slides through the first screen, exiting left. line-height 1 + a full em of headroom keeps every glyph inside the frame. ---- */
.monolith {
  position: absolute; z-index: 0; left: 100vw; top: calc(100vh - 1em);
  font-family: var(--font-monolith); font-weight: 900; font-size: var(--monolith-size); line-height: 1; letter-spacing: -0.01em;
  color: var(--text); white-space: nowrap; pointer-events: none; user-select: none; will-change: transform;
}

/* ---- Frame captions: exposure (top-left), coordinates + theme (top-right) ---- */
.frame { position: absolute; left: var(--margin); right: var(--margin); top: 56px; z-index: 4; display: flex; justify-content: space-between; gap: var(--s-6); pointer-events: none; }
.frame .cap { white-space: nowrap; }
.frame .frame-right { display: flex; gap: var(--s-6); align-items: baseline; pointer-events: auto; }
.frame .theme-toggle { color: var(--ion); }
.frame .theme-toggle:hover { color: var(--text); }
.frame .theme-toggle::before { content: "· "; color: var(--caption); }

/* ---- The target: one radial glow + the crosshair, centred on the plate ---- */
.target { position: absolute; left: 50%; top: 50%; width: 680px; height: 600px; margin: -300px 0 0 -340px; pointer-events: none; z-index: 1; }
.target .glow {
  position: absolute; inset: 0; border-radius: 50%; filter: blur(2px); opacity: 1;
  background: radial-gradient(circle at 48% 46%, var(--neb-0) 0%, var(--neb-1) 18%, var(--neb-2) 42%, var(--neb-3) 70%);
  transition: opacity var(--d-lock) var(--ease-lock);
}
.target .crosshair { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--rule); }
.target .xh-dashed { transform-origin: 340px 300px; transform-box: view-box; }
.target.is-locking .xh-dashed { transform: scale(.4615); stroke-dasharray: 1 0; }
.target.is-unsealed .xh-dashed { display: none; }
.target.is-unsealed .crosshair, .target.is-locking .crosshair { color: var(--ion); }
.plate.has-full .glow { opacity: .4; }

/* ---- Hero column: era line, headline, index ---- */
.plate { position: relative; min-height: 100vh; z-index: 5; pointer-events: none; } /* above the frame captions (an open full plate slides over the coordinates line) but transparent to clicks: only the hero column and plates take the pointer */
.hero-col { pointer-events: auto; }
.hero-col { position: absolute; left: var(--margin); bottom: 150px; width: 520px; max-width: calc(100% - 2 * var(--margin)); }
.era { color: var(--text-2); font-size: var(--t-cap); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--s-6); min-height: 1.6em; max-width: none; }
.hero-col h1 { margin: 0 0 var(--s-7); }

/* ---- The index: a list of buttons, the whole line is the hit target ---- */
.index { list-style: none; margin: 0; padding: 0; }
.index li { margin: 0; }
.idx-btn { display: flex; align-items: center; gap: var(--s-6); width: 100%; min-height: 26px; line-height: 2.2; font-size: 12px; font-weight: 400; text-align: left; color: var(--text-2); }
.idx-btn .n { color: var(--caption); width: 32px; flex: none; font-size: 12px; transition: color var(--d-state) var(--ease-settle); }
.idx-btn .lbl { color: var(--text); width: 120px; flex: none; transition: color var(--d-state) var(--ease-settle); }
.idx-btn .leader { width: 40px; height: 1px; background: var(--rule); flex: none; }
.idx-btn .state { font-size: var(--t-cap); letter-spacing: .1em; text-transform: uppercase; color: var(--text); white-space: nowrap; transition: color var(--d-state) var(--ease-settle); }
.idx-btn.is-read .state { color: var(--caption); }
.idx-btn.is-active .lbl, .idx-btn.is-active .state, .idx-btn.is-unsealed .state { color: var(--ion); }
.idx-btn.is-sealed .lbl { color: var(--caption); }
.idx-btn.is-sealed .state { color: var(--caption); }
.idx-btn.is-sealed { cursor: not-allowed; }
.idx-btn:hover:not(.is-sealed) .lbl { color: var(--ion); }
.idx-btn:focus-visible { box-shadow: none; outline: 0; }
.idx-btn:focus-visible .lbl { box-shadow: 0 1px 0 var(--ion); }

/* ---- Bottom captions of the plate ---- */
.plate-foot { position: absolute; left: var(--margin); right: var(--margin); bottom: 56px; display: flex; justify-content: space-between; gap: var(--s-6); z-index: 2; pointer-events: none; }
.plate-foot .wordmark { color: var(--text); }

/* ---- Plate regions: card (level 1) and full plate (level 2), two states of one region ---- */
.plate-region { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.plate-region .card, .plate-region .full { pointer-events: auto; }
.plate-region[data-level="1"] .full { display: none; }
.plate-region[data-level="2"] .card { display: none; }

.card {
  position: absolute; right: var(--margin); top: clamp(200px, 46%, 440px); width: 360px; max-width: calc(100% - 2 * var(--margin));
  padding: 22px 24px; border: 1px solid var(--rule); background: var(--surface-2); display: flex; flex-direction: column; gap: var(--s-3);
}
.card .card-h { margin: 0; }
.card .card-h:focus-visible { box-shadow: none; }
.card p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text); font-weight: 300; max-width: none; }
.card .read-more { align-self: flex-start; }

.full {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 58%);
  background: var(--bg); border-left: 1px solid var(--rule); padding: 96px var(--margin) 72px; overflow-y: auto;
}
.plate.has-full .plate-foot .hint { visibility: hidden; }
.full .full-head { position: absolute; left: var(--margin); right: var(--margin); top: 56px; display: flex; justify-content: space-between; gap: var(--s-6); }
.full .full-head .close { color: var(--ion); }
.full .full-head .close:hover { color: var(--text); }
.full h2:focus-visible { box-shadow: none; }
.full .prose { font-weight: 300; font-size: var(--t-base); line-height: 1.6; max-width: 62ch; color: var(--text); }
.full .prose p { max-width: none; }
.full .region { margin-top: var(--s-6); }
.full .region-cap { display: block; margin: var(--s-6) 0 var(--s-3); }
.full .full-actions { margin-top: var(--s-6); }
.full .mark { position: absolute; z-index: 1; }
.full .mark.tl { left: 20px; top: 20px; } .full .mark.tr { right: 20px; top: 20px; } .full .mark.bl { left: 20px; bottom: 20px; } .full .mark.br { right: 20px; bottom: 20px; }

/* ---- Colophon: below the plate's bottom rule, captions only ---- */
.colophon { border-top: 1px solid var(--rule); padding: var(--s-7) var(--margin) var(--s-8); background: var(--bg); }
.colophon .col-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-7); }
.colophon .col-row + .col-row { margin-top: var(--s-5); }
.colophon .wordmark { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text); font-weight: 500; }
.colophon .readout { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.colophon .note { max-width: 62ch; color: var(--text-2); font-size: var(--t-sm); margin: 0; }
.colophon .col-links { display: inline-flex; flex-wrap: wrap; gap: var(--s-6); align-items: baseline; }

/* ---- Mobile (≤ 768px): the index stacks, plates open full-screen ---- */
@media (max-width: 768px) {
  .frame { top: 28px; flex-direction: column; gap: var(--s-1); }
  .frame .frame-right { flex-wrap: wrap; gap: var(--s-3); }
  .target { width: 320px; height: 320px; margin: 0; left: 50%; top: 72px; transform: translateX(-50%); }
  .monolith { left: 100vw; top: calc(100vh - 1em); font-size: 200px; }
  .target .crosshair { color: var(--rule); }
  .plate { min-height: 100vh; padding: 0; }
  .hero-col { position: static; width: auto; max-width: none; padding: 372px var(--margin) 0; }
  .hero-col h1 { margin-bottom: var(--s-6); }
  .era { margin-bottom: var(--s-4); }
  .idx-btn { min-height: 44px; line-height: 1.4; gap: var(--s-4); }
  .idx-btn .lbl { width: 100px; }
  .idx-btn .leader { flex: 1; width: auto; }
  .plate-foot { position: static; padding: 172px var(--margin) 28px; }
  .sheet.has-open .frame { visibility: hidden; }
  .plate-foot .hint { display: none; }
  .plate-region { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: color-mix(in srgb, var(--bg) 88%, transparent); pointer-events: auto; }
  .card { position: static; width: auto; max-width: none; margin: 88px var(--margin) var(--s-7); }
  .full { position: static; width: auto; border-left: 0; background: transparent; padding: 96px var(--margin) 72px; overflow: visible; min-height: 100vh; }
  .full .mark { display: none; }
  .full .full-head, .plate-region .card-head { position: fixed; left: 0; right: 0; top: 0; padding: 28px var(--margin) 12px; background: var(--bg); border-bottom: 1px solid var(--grid); display: flex; justify-content: space-between; gap: var(--s-4); z-index: 61; }
  .colophon .col-row { flex-direction: column; align-items: flex-start; }
  .colophon .btn-primary { width: 100%; }
}
@media (min-width: 769px) { .plate-region .card-head { display: none; } }
@media (max-width: 480px) { .frame .coordinates { display: none; } .frame .theme-toggle::before { content: none; } }

/* Desktop: when a full plate is open its own header replaces the frame's right-hand captions */
@media (min-width: 769px) { .sheet.has-open .plate.has-full ~ .frame .frame-right, .sheet:has(.plate.has-full) .frame .frame-right { visibility: hidden; } }
/* Mobile hero: break after "it"; let the sealed state wrap instead of overflowing */
@media (max-width: 768px) {
  .hero-col h1 { font-size: 3.4rem; max-width: 280px; }
  .idx-btn .state { white-space: normal; text-align: right; max-width: 140px; line-height: 1.3; }
}