/* Shared tokens for the three option mockups. */
:root {
  --bg: #0b0b0a;
  --fg: #ebe8e1;
  --dim: #85827a;
  --line: #2a2926;
  --ember: #ff5a1f;
  --sans: "univers-next-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "ocr-b-std", "OCR B", "Courier New", monospace;
  --pad: 28px;
}
@media (max-width: 700px) { :root { --pad: 16px; } }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
/* Univers Next Pro Medium with tight tracking, as in ark.studio's intro text. */
body { font: 500 17px/1.3 var(--sans); letter-spacing: -.045em; -webkit-font-smoothing: antialiased; }
@media (max-width: 700px) { body { font-size: 16px; } }
html.lock { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.name { color: var(--fg); }
.role { color: var(--dim); }
.mono { font: 400 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.nav { display: flex; gap: 22px; }
.nav button, .nav a { color: var(--dim); transition: color .2s; }
.nav button:hover, .nav a:hover { color: var(--fg); }

/* Viewer: one frame, letterboxed on black. */
.v { position: fixed; inset: 0; background: #000; z-index: 50; display: grid; place-items: center; }
.v[hidden] { display: none; }
.v-img { max-width: calc(100vw - 2 * var(--pad)); max-height: calc(100vh - 120px); display: block; }
.v-cap { position: absolute; left: var(--pad); bottom: 22px; color: var(--dim); }
.v-n { position: absolute; right: var(--pad); bottom: 22px; color: var(--dim); }
.v-x { position: absolute; top: 18px; right: var(--pad); color: var(--dim); z-index: 2; }
.v-x:hover { color: var(--fg); }
.v-p, .v-nx { position: absolute; top: 60px; bottom: 60px; width: 50%; }
.v-p { left: 0; cursor: w-resize; }
.v-nx { right: 0; cursor: e-resize; }

/* Info panel. */
.info { position: fixed; inset: 0; z-index: 40; background: rgba(11, 11, 10, .96); padding: 96px var(--pad) var(--pad); overflow: auto; }
.info[hidden] { display: none; }
.info-in { max-width: 560px; }
.info h2 { font-weight: 500; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 0 0 28px; }
.info p { margin: 0 0 18px; font-size: 20px; line-height: 1.28; }
.info dl { display: grid; grid-template-columns: 90px 1fr; gap: 8px 16px; margin: 36px 0 0; }
.info dt { color: var(--dim); padding-top: 3px; }
.info dd { margin: 0; }
.info .draft { color: var(--ember); margin-top: 48px; }
.info-x { position: fixed; top: 22px; right: var(--pad); color: var(--dim); }