/* ZeusFaber — Brand World V.02
   Forge Black #000000 · Parchment Beige #EDE7E0 · Collar Blue #494F87 */

/* Serrif Mono Condensed (Displaay) — TRIAL cuts, licensing pending.
   Per Filip: titles use Serrif Mono Condensed Regular too; Ashcroft is
   the alternative logotype face only and is not used on the site. */
@font-face {
  font-family: 'Serrif Mono Condensed';
  src: url('/assets/fonts/SerrifMonoCondensed-TRIAL-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Serrif Mono Condensed';
  src: url('/assets/fonts/SerrifMonoCondensed-TRIAL-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Millionaire';
  src: url('/assets/fonts/MillionaireItalic.otf') format('opentype');
  font-style: italic; font-display: swap;
}

:root {
  --black: #000000;
  --parchment: #EDE7E0;
  --collar: #494F87;
  --mono: 'Serrif Mono Condensed', 'Courier New', Courier, monospace;
  --italic: 'Millionaire', Georgia, 'Times New Roman', serif;
  --display: 'Serrif Mono Condensed', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; margin: 0; }

::selection { background: var(--collar); color: var(--parchment); }

body {
  background: var(--parchment);
  color: var(--black);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
}

a { color: inherit; }
a:hover { color: var(--collar); }
:focus-visible { outline: 2px solid var(--collar); outline-offset: 2px; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: var(--black);
  color: var(--parchment);
  display: flex; flex-direction: column; align-items: center;
  padding: 2.5rem 0 3.5rem;
  /* no overflow:hidden — the sticky anvil must pin within the viewport */
}
/* everything in the hero scrolls above the pinned anvil */
.hero > * { position: relative; z-index: 1; }
.hero-seal {
  display: flex; align-items: center; gap: 1.2rem;
  letter-spacing: .45em; font-size: .95rem; text-indent: .45em;
}
.hero-seal img { width: 56px; height: auto; }
/* Pinned to the viewport center while the hero scrolls past (as in the
   prototype: the anvil holds still, the textura and italic move over it).
   The absolute wrapper spans the hero, so the sticky video pins inside it
   and is released exactly when the hero ends. */
.hero-pin {
  position: absolute; inset: 0;
  z-index: 0 !important;
  pointer-events: none;
}
.hero-anvil {
  position: sticky;
  top: calc(50vh - min(38vh, 380px));
  height: min(76vh, 760px);
  width: auto;
  max-width: 96vw;
  margin: 0 auto;
  display: block;
}
.hero-spacer { height: 76vh; }
.hero-wordmark {
  width: min(90vw, 1510px); display: block;
}
.hero-tagline {
  font-family: var(--italic); font-style: italic;
  font-size: clamp(1.5rem, 2.7vw, 2.8rem);
  text-align: center; line-height: 1.25;
  margin: 2rem 0 4.5rem;
}
.numerals { letter-spacing: .06em; }
.hero-lockup { margin-bottom: 2.8rem; }
.hero-cols { margin-bottom: 1.5rem; }

/* ---------- file-tab nav ---------- */

.filenav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: clamp(1.5rem, 5.5vw, 6rem);
  justify-content: center;
  background: var(--parchment);
  border-bottom: 1px solid var(--black);
  padding: .85rem 1.5rem;
  overflow-x: auto; white-space: nowrap;
}
.tab { text-decoration: none; font-size: .95rem; }
.tab.active { text-decoration: underline; text-underline-offset: 5px; }
.locked-tabs { display: contents; }
.nav-mark { width: 30px; height: auto; }

/* cipher form lives where the locked tabs would be */
.cipher-form { display: flex; gap: 1.2rem; }
.cipher-form input {
  font: inherit; font-size: .9rem;
  background: transparent; color: inherit;
  border: none; border-bottom: 1px solid var(--black);
  padding: .15rem .2rem; width: 12ch;
}
.cipher-form input::placeholder { color: rgba(0, 0, 0, .5); }
.cipher-form input:focus { outline: none; border-bottom-color: var(--collar); }
/* Mask the cipher without type="password", so password managers stay quiet.
   (Firefox lacks -webkit-text-security and shows plain text — acceptable.) */
.cipher-form input.masked { -webkit-text-security: disc; }
.cipher-form.shake { animation: shake .35s; }
.cipher-form.shake input { border-bottom-color: var(--collar); }
@keyframes shake {
  20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(2px); }
}

/* ---------- document ---------- */

.document {
  max-width: 820px;
  margin: 0 auto;
  padding: 5rem 1.5rem 7rem;
  position: relative; z-index: 1;
}
.doc-head { text-align: center; margin-bottom: 5.5rem; }
.doc-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(4rem, 9vw, 7.5rem);
  letter-spacing: .01em;
  line-height: 1.05;
}
.doc-meta {
  letter-spacing: .35em; font-size: .8rem; margin-top: 2.2rem; text-indent: .35em;
}
.document h2 {
  font-weight: 400; font-size: 1.75rem; letter-spacing: .02em;
  margin: 4.5rem 0 1.6rem;
}
.document p { margin: 1.45rem 0; }
.document ul { margin: 1.15rem 0; padding-left: 1.4rem; }
.document li { margin: .9rem 0; }
.references { font-size: .95rem; }
.references a { word-break: break-all; }

.toc-title { margin-top: 0 !important; }
.toc { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.toc li {
  display: flex; gap: 2.4rem;
  border-top: 1px solid var(--black);
  padding: .55rem .1rem;
  margin: 0;
}
.toc li:last-child { border-bottom: 1px solid var(--black); }
.toc li span { min-width: 3.8ch; }
.toc li.muted { color: rgba(0, 0, 0, .38); }

/* ---------- deck ---------- */

.deck-pages { display: flex; flex-direction: column; gap: 1.5rem; }
.deck-pages img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--black);
}

/* ---------- founders ---------- */

.founders-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
}
.founder { margin: 0; }
.founder img { width: 100%; height: auto; display: block; }
.founder figcaption h2 { margin: 1.6rem 0 0; font-size: 1.8rem; }
.founder .role { font-size: .85rem; margin: .2rem 0 1.4rem; }
.founder-link a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- inspiration ---------- */

.inspiration { list-style: none; padding: 0; margin: 0; }
.inspiration li {
  display: flex; gap: 2rem; align-items: baseline;
  border-top: 1px solid var(--black); padding: .6rem .1rem;
  margin: 0;
}
.inspiration li:last-child { border-bottom: 1px solid var(--black); }
.inspiration .num { min-width: 4.5ch; }
.inspiration .name { flex: 1; }
.inspiration .cc { min-width: 5ch; }
.inspiration a { margin-left: auto; text-decoration: none; }
.inspiration a:hover { text-decoration: underline; color: var(--collar); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--black);
  color: var(--parchment);
  display: flex; flex-direction: column; align-items: center;
  padding: 2rem 0 2.5rem;
  overflow: hidden;
}
.footer-wordmark { width: 100%; max-width: 1640px; display: block; }
.footer-seal { width: 38px; height: auto; margin: 1rem 0 3rem; }
.footer-lockup {
  width: min(1060px, 92vw);
  letter-spacing: .25em;
  font-size: 1.05rem;
}
.footer-lockup p {
  display: flex; justify-content: space-between; margin: .35rem 0;
}
.footer-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  width: min(1060px, 92vw);
  font-size: .82rem;
  margin: 2.5rem 0 3rem;
}
.footer-legal {
  text-align: center; font-size: .85rem; letter-spacing: .25em;
}
.footer-legal a { color: inherit; }
.site-footer ::selection,
.hero ::selection { background: var(--parchment); color: var(--black); }

/* ---------- responsive ---------- */

@media (max-width: 768px) {
  .filenav { gap: 1.4rem; justify-content: flex-start; }
  .founders-grid, .footer-cols { grid-template-columns: 1fr; }
  .document { padding-top: 3rem; }
  .hero-wordmark { margin-top: -3rem; }
  .footer-lockup { letter-spacing: .12em; font-size: .85rem; }
  .footer-legal { letter-spacing: .12em; }
}