/* =========================================================================
   ZEUS FABER — desktop
   Built 1:1 from the Figma source (ZeusFaber — Web, node 4254-74).

   UNITS
   -----
   1rem == 1 Figma pixel. `html { font-size }` is set to 1px at >=1440px wide
   and to (viewportWidth / 1440)px below that, so every number in this file is
   the literal value read off the Figma canvas.

   CAP-HEIGHT TRIM
   ---------------
   Figma trims text boxes to cap-height/alphabetic-baseline, so a node's `y`
   is the top of the capitals, not the top of the line box. Each type style
   therefore carries a negative/positive `margin-top` that converts the line
   box back to a cap-height box, derived from the font metrics:
     Millionaire        upm 1000  asc 850  desc 340  cap 850
     Serrif Mono Cond.  upm 1000  asc 982  desc 195  cap 721 (USE_TYPO_METRICS)
   ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: "Millionaire";
  src: url("../assets/fonts/Millionaire-Roman.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Millionaire Italic";
  src: url("../assets/fonts/Millionaire-Italic.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Serrif Mono";
  src: url("../assets/fonts/SerrifMonoCondensed-TRIAL-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Serrif Mono";
  src: url("../assets/fonts/SerrifMonoCondensed-TRIAL-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
}

/* --------------------------------------------------------------- theme --- */
:root {
  --bg: #ede7e0;
  --fg: #000000;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-theme="dark"] {
  --bg: #000000;
  --fg: #ede7e0;
}
/* the footer is always the inverse of the current palette */
.inverse {
  --bg: #000000;
  --fg: #ede7e0;
}
html[data-theme="dark"] .inverse {
  --bg: #ede7e0;
  --fg: #000000;
}

/* ---------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 1px;                     /* overridden by the inline head script */
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 1439.98px) { html { font-size: calc(100vw / 1440); } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Serrif Mono", ui-monospace, "SFMono-Regular", monospace;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.45s ease, color 0.45s ease;
}

p { margin: 0; }
a { color: inherit; }
/* the display faces ship a single 400 cut — never let the UA sheet ask for
   bold (h1) or let the browser synthesise one */
h1, h2, h3, h4, h5, h6 { font: inherit; margin: 0; }
body, input, button { font-weight: 400; font-synthesis: none; }

::selection { background: var(--fg); color: var(--bg); }

/* ------------------------------------------------------------ type kit --- */
/* Millionaire Roman 170 / 180 / -8.5 — page + section display */
.t-display {
  font-family: "Millionaire", serif;
  font-size: 170rem;
  line-height: 180rem;
  letter-spacing: -8.5rem;
  margin-top: 11.15rem;
  white-space: nowrap;
}
/* "Favourites" is three letters longer than the "Friends" the frame was drawn
   for and would run 25px into the meta column at 836. Desktop only: the same
   style at 156 / 165.18 / -7.8 (x0.9176), cap trim recomputed for the new size
   with the formula in DESIGN-NOTES (11.15 x 0.9176). Mobile keeps 50 / 55. */
@media (min-width: 768px) {
  .t-display-fit {
    font-size: 156rem;
    line-height: 165.18rem;
    letter-spacing: -7.8rem;
    margin-top: 10.23rem;
  }
  /* "Data room" needs a touch more: 148 / 156.71 / -7.4 (x0.8706), trim 9.71 */
  .t-display-fit-s {
    font-size: 148rem;
    line-height: 156.71rem;
    letter-spacing: -7.4rem;
    margin-top: 9.71rem;
  }
}
/* Millionaire Roman 32 / 1.5 — running section titles */
.t-title {
  font-family: "Millionaire", serif;
  font-size: 32rem;
  line-height: 1.5;
  letter-spacing: 0;
  margin-top: -4.96rem;
  white-space: nowrap;
}
/* Millionaire Italic 55 / 65 / -3.3 — hero statement */
.t-hero {
  font-family: "Millionaire Italic", serif;
  font-size: 55rem;
  line-height: 65rem;
  letter-spacing: -3.3rem;
  margin-top: 0.225rem;
  text-align: center;
  white-space: nowrap;
}
.t-hero .last { line-height: 75rem; }
/* Serrif Mono 16 / normal, font only — for boxes that own their own position */
.mono {
  font-size: 16rem;
  line-height: normal;
  white-space: nowrap;
}
/* Serrif Mono 16 / normal — nav, meta rows, lockup */
.t-mono {
  font-size: 16rem;
  line-height: normal;
  margin-top: -4.176rem;
  white-space: nowrap;
}
/* Serrif Mono 16 / 1.5 — body copy */
.t-body {
  font-size: 16rem;
  line-height: 1.5;
  margin-top: -6.76rem;
  white-space: pre-wrap;
}
/* Serrif Mono 32 / 1.5 — founder names */
.t-name {
  font-size: 32rem;
  line-height: 1.5;
  margin-top: -13.52rem;
}
/* Serrif Mono 14 / 1.5 / -0.7 — the two columns under the lockup */
.t-col {
  font-size: 14rem;
  line-height: 1.5;
  letter-spacing: -0.7rem;
  margin-top: -5.915rem;
  white-space: pre-wrap;
}
/* Serrif Mono 10 / 1.5 / -0.5 — the two hero columns */
.t-micro {
  font-size: 10rem;
  line-height: 1.5;
  letter-spacing: -0.5rem;
  margin-top: -4.225rem;
  white-space: pre-wrap;
}
/* the same columns in the footer, set solid at 13 */
.t-micro-13 {
  font-size: 10rem;
  line-height: 13rem;
  letter-spacing: -0.5rem;
  margin-top: -3.225rem;
  white-space: pre-wrap;
}

.mbr { display: none; }
.up { text-transform: uppercase; }
.bold { font-weight: 700; }

/* a Figma empty paragraph — one blank line of leading */
.sp { white-space: pre; }

/* ------------------------------------------------------------- artwork --- */
/* every mark is the supplied SVG, recoloured through the palette by masking
   so a single node serves both themes */
.mark {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;    mask-position: center;
  -webkit-mask-size: 100% 100%;     mask-size: 100% 100%;
}
.m-wordmark  { -webkit-mask-image: url("../assets/svg/wordmark-dark.svg");  mask-image: url("../assets/svg/wordmark-dark.svg"); }
.m-emblem1   { -webkit-mask-image: url("../assets/svg/emblem-1-dark.svg");  mask-image: url("../assets/svg/emblem-1-dark.svg"); }
.m-emblem2   { -webkit-mask-image: url("../assets/svg/emblem-2-dark.svg");  mask-image: url("../assets/svg/emblem-2-dark.svg"); }
.m-text1     { -webkit-mask-image: url("../assets/svg/text-1-dark.svg");    mask-image: url("../assets/svg/text-1-dark.svg"); }
.m-text2     { -webkit-mask-image: url("../assets/svg/text-2-dark.svg");    mask-image: url("../assets/svg/text-2-dark.svg"); }
.m-logomark  { -webkit-mask-image: url("../assets/svg/logomark-dark.svg");  mask-image: url("../assets/svg/logomark-dark.svg"); }
.m-initial   { -webkit-mask-image: url("../assets/svg/initial-dark.svg");   mask-image: url("../assets/svg/initial-dark.svg"); }
.m-color     { -webkit-mask-image: url("../assets/svg/color-dark.svg");     mask-image: url("../assets/svg/color-dark.svg"); }

/* --------------------------------------------------------------- shell --- */
/* the 1440 design canvas, centred; full-bleed bands sit outside it */
.canvas {
  position: relative;
  width: 1440rem;
  margin: 0 auto;
}
main {
  position: relative;
  /* --ft is where the footer starts; the document ends at the footer's bottom */
  height: calc(var(--ft) + max(900rem, 100vh));
}

.abs { position: absolute; }
/* horizontal rule — Figma "Line", 1px, 1280 wide inside the 80px margins */
.rule {
  position: absolute;
  left: 80rem;
  width: 1280rem;
  height: 1rem;
  background: currentColor;
}

/* ---------------------------------------------------------------- nav ---- */
.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 47rem;
  z-index: 60;
  will-change: transform;
  color: var(--fg);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 1rem 0;
  background: var(--bg);
}
.nav::after {                                   /* the 1px rule under the bar */
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1rem;
  background: currentColor;
}
.nav .canvas { height: 47rem; }
.nav::before, .nav::after, .nav a, .nav .cipher {
  transition: background-color 0.12s linear, color 0.12s linear;
}
.nav a {
  position: absolute;
  top: 17rem;
  text-decoration: none;
}
.nav a { transform: translateX(-50%); text-align: center; }
.nav a[data-x="manifesto"] { left: 132rem; }
.nav a[data-x="founders"]  { left: calc(8.33% + 166rem); }
.nav a[data-x="favourites"] { left: calc(25% + 80rem); }
.nav a.current { text-decoration: underline; text-underline-offset: 2rem; }
.nav a:hover   { text-decoration: underline; text-underline-offset: 2rem; }
.nav .logo {
  position: absolute;
  left: 50%;
  top: 6rem;
  width: 31.975rem;
  height: 31rem;
  transform: translateX(-50%);
}

/* the terminal caret after "cipher:" — blinks, and you can type into it */
.cipher {
  position: absolute;
  left: calc(83.33% - 40rem);
  top: 0;
  width: 220rem;
  height: 47rem;
  white-space: nowrap;
  cursor: text;
}
.cipher .cipher-label { position: absolute; left: 0; top: 17rem; }
.cipher .cipher-typed { position: absolute; left: 64rem; top: 17rem; }
.cipher-input {
  position: absolute;
  left: 64rem;
  top: 10rem;
  width: 150rem;
  height: 26rem;
  font: inherit;
  letter-spacing: inherit;
  color: transparent;
  background: none;
  border: 0;
  outline: none;
  padding: 0;
  opacity: 0;
  caret-color: transparent;
}
.caret {
  position: absolute;
  left: 64rem;
  top: 17rem;
  width: 9rem;
  height: 15rem;
  background: currentColor;
  animation: blink 1.15s steps(1, end) infinite;
  pointer-events: none;
}
@keyframes blink { 0%, 55% { opacity: 1 } 56%, 100% { opacity: 0 } }
.cipher.typing .caret { animation: none; opacity: 1; }

/* ------------------------------------------------------------- ticker ---- */
/* The strip locks to the top and stays there — it never scrolls away with the
   page. The nav rides up from below and covers it. */
.ticker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 49.278rem;
  overflow: hidden;
  will-change: transform, clip-path;
  z-index: 50;
  color: var(--fg);
}
.ticker-rail {
  position: absolute;
  top: 20rem; left: 0;
  height: 29.278rem;
  will-change: transform;
}
.ticker-unit {
  position: absolute;
  top: 0;
  width: 538.154rem;
  height: 29.278rem;
}
.ticker-unit .mark { position: absolute; }
.tk-wordmark { left: 0;         top: 2.566rem;  width: 149.875rem; height: 24.146rem; }
.tk-emblem1  { left: 179.875rem; top: 0.014rem;  width: 26.828rem;  height: 29.250rem; }
.tk-text1    { left: 236.703rem; top: 4.717rem;  width: 129.777rem; height: 19.844rem; }
.tk-emblem2  { left: 396.480rem; top: 0;         width: 21.778rem;  height: 29.278rem; }
.tk-text2    { left: 448.258rem; top: 4.729rem;  width: 59.896rem;  height: 19.819rem; }

/* ------------------------------------------------------- palette switch -- */
.theme-toggle {
  position: fixed;
  right: 20rem;
  bottom: 20rem;
  width: 15rem;
  height: 15rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 90;
  color: var(--fg);
  transition: color 0.12s linear;
}
.theme-toggle .mark {
  width: 100%;
  height: 100%;
  transition: transform 0.5s var(--ease), background-color 0.12s linear;
}
.theme-toggle:hover .mark { transform: rotate(180deg); }

/* ------------------------------------------------------------- reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28rem);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-center] { transform: translate(-50%, 28rem); }
[data-reveal][data-center].is-in { transform: translateX(-50%); }
[data-reveal][data-right] { transform: translate(-100%, 28rem); }
[data-reveal][data-right].is-in { transform: translateX(-100%); }

/* =========================================================== INTRO ======= */
#intro-spacer { position: relative; height: 0; }

.hero-layer {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440rem;
  margin-left: -720rem;
  height: 1000rem;
  pointer-events: none;
  z-index: 20;
}
.hero-layer.pinned { position: fixed; }
.hero-layer > * { pointer-events: auto; }
#heroContent { position: absolute; inset: 0; will-change: transform; }

.hero-video {
  position: absolute;
  left: 80rem;
  top: 424rem;
  width: 1280rem;
  height: 720rem;
  z-index: 1;
  will-change: transform, opacity;
}
/* The film is a plate on flat white (light) or flat black (dark). Blending it
   against the palette makes that ground vanish exactly, whatever the palette
   is — no colour matching to keep in sync. The ground is painted inside this
   box so the blend never depends on the surrounding stacking context. */
.hero-video { background: var(--bg); }
.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
}
html[data-theme="dark"] .hero-video video { mix-blend-mode: screen; }
.hero-video[hidden] { display: none; }

.hero-type {
  position: absolute;
  left: 50%;
  top: 211rem;
  transform: translateX(-50%);
  margin-left: 0;
  z-index: 2;
}

.lockup { position: absolute; left: 0; top: 0; width: 100%; height: 1rem; z-index: 2; }
.lockup .emblem {
  position: absolute;
  left: 50%;
  top: 499rem;
  width: 42rem;
  height: 46.1rem;
  transform: translateX(-50%);
}
.lockup .zeus  { position: absolute; left: calc(45.83% - 16rem); top: 516rem; }
.lockup .faber { position: absolute; left: calc(54.17% - 19rem); top: 516rem; }

/* the two columns under the lockup (Figma "Group 8") */
.hero-cols { position: absolute; left: 0; top: 0; width: 100%; height: 1rem; z-index: 2; }
.col-left  { position: absolute; left: 188rem; width: 518rem; }
.col-right { position: absolute; left: 735rem; width: 518rem; }
/* the initial is a two-row drop cap: cap height + one line of 14/21 is 31,
   which is exactly the height Figma gives it */
.dropcap {
  position: absolute;
  left: 188rem;
  width: 29rem;
  height: 31rem;
}
.hero-layer .col-left,
.hero-layer .col-right,
.hero-layer .dropcap { top: 645rem; }

/* ====================================================== MANIFESTO ======== */
.display-l  { position: absolute; left: 80rem; }
.display-r  { position: absolute; text-align: right; transform: translateX(-100%); }

.meta-row { position: absolute; left: 0; top: 0; width: 100%; height: 1rem; }
.meta-row > p { position: absolute; }
.meta-m  { left: calc(4.17% + 20rem); }
.meta-zf { left: calc(12.5% + 8rem); }
.meta-eu { left: calc(45.83% - 62rem); }
.meta-ob { left: calc(87.5% - 185rem); }
.meta-eu-alt { left: calc(62.5% - 64rem); }

/* section machinery ------------------------------------------------------ */
.section { display: contents; }

/* One rig per title. Its runs are driven entirely from script: each travels
   and shrinks from the big two-row setting to the small one-row setting, so
   the subject word ends up sitting after "The" rather than fading out. */
.title-rig {
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -720rem;
  width: 1440rem;
  height: 0;
  z-index: 12;
  pointer-events: none;
}
.title-rig .tw {
  position: absolute;
  display: block;
  font-family: "Millionaire", serif;
  line-height: 1.0588235;
  white-space: nowrap;
  will-change: top, left, font-size;
}
.sec-body {
  position: absolute;
  left: calc(33.33% + 32rem);
  width: 848rem;
}
.sec-body a, .refs a { text-decoration: underline; text-underline-offset: 2rem; }
.sec-body a:hover, .refs a:hover { opacity: 0.55; }

.refs { position: absolute; left: calc(33.33% + 32rem); width: 848rem; word-break: break-word; }
.refs p[id] { scroll-margin-top: 90rem; }

/* Each section carries a real heading for screen readers and for print. On
   screen it is clipped away: the visible title is the script-driven rig. */
.sec-h {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* --------------------------------------------------------------- footer -- */
.footer {
  position: absolute;
  left: 0;
  top: var(--ft);
  width: 100%;
  /* 900 by design, but never shorter than the viewport: the document ends at
     the footer's bottom, so a footer shorter than the window would leave a
     band of page ground above it at full scroll */
  height: max(900rem, 100vh);
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  z-index: 40;
}
.footer .canvas { height: 900rem; }
.footer .wordmark {
  position: absolute;
  left: 50%;
  top: 97.57rem;
  width: 149.875rem;
  height: 24.146rem;
  transform: translateX(-50%);
}
.footer .hero-type { position: absolute; top: 172rem; }
.footer .lockup .emblem { top: 432rem; }
.footer .lockup .zeus, .footer .lockup .faber { top: 449rem; }
.footer .col-left, .footer .col-right, .footer .dropcap { top: 550rem; }
.footer .colophon {
  position: absolute;
  left: 50%;
  top: 820rem;
  transform: translateX(-50%);
  text-align: center;
}
.footer .colophon a { text-decoration: underline; text-underline-offset: 2rem; }

/* ======================================================== FOUNDERS ======= */
.founder-photo {
  position: absolute;
  top: 462rem;
  width: 416rem;
  height: 377rem;
  border-radius: 20rem;
  overflow: hidden;
}
.founder-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* the portraits ship as a pair — a dithered plate cut for each ground */
.founder-photo .on-dark { display: none; }
html[data-theme="dark"] .founder-photo .on-light { display: none; }
html[data-theme="dark"] .founder-photo .on-dark { display: block; }
.founder-meta { position: absolute; top: 859rem; width: 377rem; }
.founder-meta .role { font-size: 16rem; line-height: 1.5; }
.founder-bio  { position: absolute; top: 1026rem; }
.founder-bio a { text-decoration: underline; text-underline-offset: 2rem; }
.founder-bio a:hover { opacity: 0.55; }

/* ========================================================= FAVOURITES ==== */
.favourite {
  position: absolute;
  left: 0;
  width: 100%;
  height: 69rem;
}
.favourite .rule { top: 0; }
.favourite .name { position: absolute; left: 80rem; top: 7rem; white-space: pre; }
.favourite .cc   { position: absolute; left: calc(58.33% - 2.84rem); top: 7rem; }
.favourite .url  {
  position: absolute;
  right: 80rem;
  top: 7rem;
  text-align: right;
  text-decoration: none;
  white-space: nowrap;
}
.favourite .url::after { content: " \2197"; }
/* the whole row lights up on hover, the link itself inverts */
.favourite .hit {
  position: absolute;
  left: 80rem;
  top: 0;
  width: 1280rem;
  height: 100%;
  z-index: 2;
}
.favourite .hit:hover ~ .url,
.favourite .url:hover { text-decoration: underline; text-underline-offset: 2rem; }

/* ========================================================= DATA ROOM ===== */
/* the rows share the favourites geometry; see js/data-room.js */
.doc {
  position: absolute;
  left: 0;
  width: 100%;
  height: 69rem;
}
.doc .rule { top: 0; }
.doc .name { position: absolute; left: 80rem; top: 7rem; white-space: pre; }
.doc .cc   { position: absolute; left: calc(58.33% - 2.84rem); top: 7rem; }
.doc .url  {
  position: absolute;
  right: 80rem;
  top: 7rem;
  text-align: right;
  text-decoration: none;
  white-space: nowrap;
}
.doc .url::after { content: " \2197"; }
/* the whole row lights up on hover, the link itself inverts */
.doc .hit {
  position: absolute;
  left: 80rem;
  top: 0;
  width: 1280rem;
  height: 100%;
  z-index: 2;
}
.doc .hit:hover ~ .url,
.doc .url:hover { text-decoration: underline; text-underline-offset: 2rem; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transition: none; }
  [data-reveal]:not([data-center]):not([data-right]) { transform: none !important; }
  [data-reveal][data-center] { transform: translateX(-50%) !important; }
  [data-reveal][data-right] { transform: translateX(-100%) !important; }
  .caret { animation: none; }
}

/* ============================================================ 404 ======== */
.nf { position: absolute; left: 0; top: 442rem; width: 100%; }
.nf .rule { top: 0; }
.nf .nf-copy { position: absolute; left: 80rem; top: 7rem; width: 640rem; }
.nf a { text-decoration: underline; text-underline-offset: 2rem; }
.nf a:hover { opacity: 0.55; }

/* ========================================================== PRINT ======== */
/* Mirrors the noscript fallback: nothing pinned or fixed (fixed elements repeat
   on every printed page), no film, no strip, no bar, everything revealed. The
   canvas is 1440 design px wide, so the page is landscape and 1rem is scaled to
   the printable width; the mobile query never matches that width. The title
   rigs are script-driven and have no resting position, so print shows the
   .sec-h headings at each title's design y instead. */
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  html { font-size: calc((100vw - 24mm) / 1440) !important; }
  #intro-spacer, .hero-video, .ticker, .nav, .theme-toggle, .cipher, .title-rig { display: none !important; }
  .hero-layer { position: absolute !important; }
  [data-reveal] { opacity: 1 !important; transition: none !important; }
  [data-reveal]:not([data-center]):not([data-right]) { transform: none !important; }
  [data-reveal][data-center] { transform: translateX(-50%) !important; }
  [data-reveal][data-right] { transform: translateX(-100%) !important; }
  .sec-h {
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    left: 80rem;
    font-family: "Millionaire", serif;
    font-weight: normal;
    font-size: 96rem;
    line-height: 1.0588235;
    letter-spacing: -4.8rem;
  }
  .footer { break-before: page; }
}

/* data room rows are 92 tall: title at 7, a one-line summary under it at 33
   in Serrif Mono 14 / 21, indented past the numeral column (8 x 8.64) */
.doc { height: 92rem; }
.doc .blurb {
  position: absolute;
  left: 149.12rem;
  top: 33rem;
  width: 640rem;
  font-size: 14rem;
  line-height: 1.5;
  letter-spacing: -0.7rem;
  margin: 0;
  opacity: 0.62;
  white-space: normal;
}
/* data room: locked state, lock link, viewer */
.dr-locked { position: absolute; left: 0; top: 442rem; width: 100%; }
.dr-locked .rule { top: 0; }
.dr-locked .dr-copy { position: absolute; left: 80rem; top: 7rem; width: 640rem; }
.dr-lock { position: absolute; left: 80rem; }
.dr-lock a, .dr-crumb a { text-decoration: underline; text-underline-offset: 2rem; }
.dr-lock a:hover, .dr-crumb a:hover { opacity: 0.55; }
.dr-crumb { position: absolute; left: 80rem; top: 66rem; }
/* the document title is a running head, not a display setting:
   Millionaire 64 / 68 / -3.2, trim (68 - 1.19*64)/2 = -4.08 */
.dr-title {
  font-size: 64rem;
  line-height: 68rem;
  letter-spacing: -3.2rem;
  margin-top: 4.08rem;
  white-space: nowrap;
  max-width: 1280rem;
}
.pdf-pages { position: absolute; left: 80rem; top: 220rem; width: 1280rem; user-select: none; -webkit-user-select: none; }
.pdf-page { display: block; width: 100%; height: auto; margin: 0 0 24rem; background: #fff; box-shadow: 0 0 0 1rem rgba(0, 0, 0, 0.12); }
.pdf-status { position: absolute; left: 80rem; top: 220rem; }
.pdf-status[hidden] { display: none; }
@media print { .pdf-pages { display: none !important; } .pdf-status { display: block !important; } .pdf-status::after { content: "This document is view-only."; } }

/* the cipher field: a wrong cipher shakes, an open session reads as a link */
@keyframes cipher-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4rem); }
  40%, 80% { transform: translateX(4rem); }
}
.cipher.wrong { animation: cipher-shake 0.5s ease-out; }
.cipher.busy .caret { animation: none; opacity: 0.4; }
.cipher .cipher-link { display: none; position: absolute; left: 0; top: 17rem; text-decoration: underline; text-underline-offset: 2rem; }
.cipher.unlocked .cipher-label, .cipher.unlocked .cipher-typed, .cipher.unlocked .caret, .cipher.unlocked .cipher-input { display: none; }
.cipher.unlocked .cipher-link { display: block; }
.cipher .cipher-link:hover { opacity: 0.55; }