@font-face { font-family: "Inter Tight"; font-weight: 800; font-style: normal; font-display: swap; src: url("assets/fonts/inter-tight-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/kalam-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/kalam-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* One comp pixel. The approved comp is a phone drawn 941px wide, and the page scales with the viewport at every width. */
:root {
  --u: calc(100vw / 941);
  --primary: #533afd;
  --primary-hover: #4434d4;
  --primary-press: #2e2b8c;
  --ink: #0b0b0c;
  --ink-2: #3d4250;
  --ink-note: #4134f0;
  --paper: #f6f7f9;
  --rule: #d0e3fb;
  --rules: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='52'%3E%3Crect y='39' width='8' height='2' fill='%23d0e3fb'/%3E%3C/svg%3E");
  --margin: #b46cfd;
  --field: #ffffff;
  --field-line: #b8bcc5;
  --placeholder: #6b7280;
  --cover: #111111;
  --highlight: #f6dd55;
  --sticky: #f7de5e;
  --shadow: rgba(10, 14, 30, 0.22);
  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, sans-serif;
  --hand: "Kalam", "Comic Sans MS", cursive;
  /* Reading floors: the comp is a phone drawn 941px wide, so its small type would land under 16px on a real phone. */
  --t-body: max(16px, calc(31 * var(--u)));
  --t-field: max(16px, calc(32 * var(--u)));
  --t-small: max(14px, calc(28 * var(--u)));
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

/* The notebook at night: the portal's dark canvas, faint rules, notes in light violet, a coral highlighter.
   It follows the system unless the visitor picked a theme (data-theme, the same edrise.theme key the portal reads). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8edf6;
    --ink-2: #c3cddd;
    --ink-note: #a094ff;
    --paper: #0b1324;
    --rule: #1f2c46;
    --rules: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='52'%3E%3Crect y='39' width='8' height='2' fill='%231f2c46'/%3E%3C/svg%3E");
    --margin: #8b7dff;
    --field: #0f1a30;
    --field-line: #33476b;
    --placeholder: #8d9bb3;
    --highlight: #ff5a5f;
    --sticky: #f0c24e;
    --shadow: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --ink: #e8edf6;
    --ink-2: #c3cddd;
    --ink-note: #a094ff;
    --paper: #0b1324;
    --rule: #1f2c46;
    --rules: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='52'%3E%3Crect y='39' width='8' height='2' fill='%231f2c46'/%3E%3C/svg%3E");
    --margin: #8b7dff;
    --field: #0f1a30;
    --field-line: #33476b;
    --placeholder: #8d9bb3;
    --highlight: #ff5a5f;
    --sticky: #f0c24e;
    --shadow: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

.theme-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-light { display: none !important; }
  :root:not([data-theme="light"]) .theme-dark { display: block !important; }
}
:root[data-theme="dark"] .theme-light { display: none !important; }
:root[data-theme="dark"] .theme-dark { display: block !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: var(--t-body); line-height: 1.45; overflow-x: clip; }
::selection { background: var(--primary); color: #fff; }
a { color: inherit; }
:focus-visible { outline: max(2px, calc(4 * var(--u))) solid var(--primary); outline-offset: max(2px, calc(4 * var(--u))); }

.skip { position: absolute; left: 16px; top: -200px; background: #fff; color: #0b0b0c; padding: 12px 20px; z-index: 10; }
.skip:focus { top: 16px; }

/* Cover: the notebook's marbled cover band. */
.cover {
  background: var(--cover) url("assets/plates/marble.png") repeat-x;
  background-size: calc(632 * var(--u)) calc(82 * var(--u)); background-position: left center;
}
.cover-in {
  max-width: calc(941 * var(--u)); margin: 0 auto; height: calc(82 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(43 * var(--u)) 0 calc(58 * var(--u));
}
.label {
  display: flex; align-items: center;
  height: calc(52 * var(--u)); padding: 0 calc(14 * var(--u));
  background: #fff; border: calc(3 * var(--u)) solid var(--cover); border-radius: calc(10 * var(--u));
  font-family: var(--display); font-weight: 800; font-size: max(17px, calc(40 * var(--u))); letter-spacing: -0.01em; line-height: 1;
  text-decoration: none; color: #0b0b0c;
}
.label { gap: calc(8 * var(--u)); }
.label-mark { width: auto; height: 1.05em; display: block; flex: none; }
.cover nav { display: flex; align-items: center; gap: calc(22 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); }
.cover nav a { color: #fff; background: var(--cover); padding: 0 calc(6 * var(--u)); border-radius: calc(4 * var(--u)); font-weight: 500; font-size: var(--t-small); text-underline-offset: calc(6 * var(--u)); text-decoration-thickness: max(1px, calc(2 * var(--u))); }
.theme-toggle {
  display: grid; place-items: center; width: max(36px, calc(56 * var(--u))); height: max(36px, calc(56 * var(--u)));
  background: var(--cover); color: #fff; border: max(1px, calc(2 * var(--u))) solid rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; padding: 0;
  transition: transform 160ms var(--ease-out), border-color 160ms ease;
}
.theme-toggle svg { width: 55%; height: 55%; }
.theme-toggle:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { border-color: #fff; } }
.theme-toggle .i-sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; } }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.cover nav .sep { color: #fff; font-weight: 500; font-size: max(14px, calc(34 * var(--u))); line-height: 1; transform: translateY(calc(-2 * var(--u))); }

/* Paper: ruled lines every 52 comp px across the whole width; the written sheet is centred on wide screens. */
.paper { background-color: var(--paper); background-image: var(--rules); background-size: 100% calc(52 * var(--u)); }
.sheet { position: relative; max-width: calc(941 * var(--u)); margin: 0 auto; }

/* Hero */
.hero { position: relative; padding: calc(26 * var(--u)) calc(40 * var(--u)) 0 calc(64 * var(--u)); }
.hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(42.5 * var(--u)); width: max(1px, calc(2 * var(--u))); background: var(--margin); }
.hero h1 {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: calc(95 * var(--u)); line-height: 0.92; letter-spacing: -0.02em;
}
.hero h1 span { display: block; white-space: nowrap; }

.stage { position: relative; height: calc(948 * var(--u)); margin: 0 0 0 calc(-64 * var(--u)); }
.stage > * { position: absolute; margin: 0; }
.phone { left: calc(80 * var(--u)); top: 0; width: calc(568 * var(--u)); height: calc(948 * var(--u)); z-index: 2; }
.phone img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(calc(18 * var(--u)) calc(28 * var(--u)) calc(26 * var(--u)) var(--shadow)) drop-shadow(calc(4 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)) var(--shadow)); }
.tag { left: calc(612 * var(--u)); top: calc(112 * var(--u)); font-weight: 500; font-size: var(--t-small); }
.hand { font-family: var(--hand); color: var(--ink-note); line-height: 1; }
.stage .note { left: calc(630 * var(--u)); top: calc(206 * var(--u)); font-size: calc(62 * var(--u)); transform: rotate(-7deg); transform-origin: left top; -webkit-text-stroke: calc(0.6 * var(--u)) currentColor; }
.stage .note span { display: block; white-space: nowrap; }
.stage .note span + span { padding-left: calc(22 * var(--u)); }
.arrow { left: calc(622 * var(--u)); top: calc(292 * var(--u)); width: calc(58 * var(--u)); height: calc(126 * var(--u)); }
.arrow img { width: 100%; height: 100%; display: block; }
.fact { left: calc(644 * var(--u)); top: calc(392 * var(--u)); width: calc(254 * var(--u)); height: calc(94 * var(--u)); display: grid; place-items: center; }
.fact mark {
  background: var(--highlight); color: #0b0b0c; padding: calc(10 * var(--u)) calc(26 * var(--u));
  font-weight: 700; font-size: calc(50 * var(--u)); letter-spacing: -0.02em; white-space: nowrap;
  border-radius: calc(3 * var(--u)) calc(30 * var(--u)) calc(4 * var(--u)) calc(24 * var(--u)) / calc(3 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u)); transform: rotate(-2deg);
}
.sticky {
  left: calc(648 * var(--u)); top: calc(612 * var(--u)); width: calc(250 * var(--u)); height: calc(254 * var(--u));
  background: var(--sticky); transform: rotate(5deg); border-radius: calc(2 * var(--u));
  box-shadow: calc(6 * var(--u)) calc(14 * var(--u)) calc(22 * var(--u)) var(--shadow);
}

/* At night the margin reads the other way round (v6-a): sticky up by the phone, a handwritten "Ejemplo", the coral fact, the arrow pointing up from the note. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stage > .sticky { left: calc(562 * var(--u)); top: calc(34 * var(--u)); width: calc(212 * var(--u)); height: calc(228 * var(--u)); transform: rotate(8deg); }
  :root:not([data-theme="light"]) .stage > .tag { left: calc(652 * var(--u)); top: calc(318 * var(--u)); font-family: var(--hand); color: var(--ink-note); font-size: calc(46 * var(--u)); transform: rotate(-6deg); padding-bottom: calc(4 * var(--u)); border-bottom: max(2px, calc(3 * var(--u))) solid currentColor; }
  :root:not([data-theme="light"]) .stage > .fact { left: calc(630 * var(--u)); top: calc(410 * var(--u)); }
  :root:not([data-theme="light"]) .stage > .fact mark { transform: rotate(-5deg); }
  :root:not([data-theme="light"]) .stage > .arrow { left: calc(712 * var(--u)); top: calc(514 * var(--u)); width: calc(36 * var(--u)); height: calc(78 * var(--u)); transform: scaleY(-1) rotate(-12deg); }
  :root:not([data-theme="light"]) .stage > .note { left: calc(628 * var(--u)); top: calc(590 * var(--u)); }
}
:root[data-theme="dark"] .stage > .sticky { left: calc(562 * var(--u)); top: calc(34 * var(--u)); width: calc(212 * var(--u)); height: calc(228 * var(--u)); transform: rotate(8deg); }
:root[data-theme="dark"] .stage > .tag { left: calc(652 * var(--u)); top: calc(318 * var(--u)); font-family: var(--hand); color: var(--ink-note); font-size: calc(46 * var(--u)); transform: rotate(-6deg); padding-bottom: calc(4 * var(--u)); border-bottom: max(2px, calc(3 * var(--u))) solid currentColor; }
:root[data-theme="dark"] .stage > .fact { left: calc(630 * var(--u)); top: calc(410 * var(--u)); }
:root[data-theme="dark"] .stage > .fact mark { transform: rotate(-5deg); }
:root[data-theme="dark"] .stage > .arrow { left: calc(712 * var(--u)); top: calc(514 * var(--u)); width: calc(36 * var(--u)); height: calc(78 * var(--u)); transform: scaleY(-1) rotate(-12deg); }
:root[data-theme="dark"] .stage > .note { left: calc(628 * var(--u)); top: calc(590 * var(--u)); }
/* Access form */
.access { position: relative; z-index: 3; margin: calc(13 * var(--u)) calc(17 * var(--u)) 0 calc(2 * var(--u)); display: grid; }
.access label { display: block; font-size: max(16px, calc(28 * var(--u))); line-height: 1.2; margin-bottom: calc(4 * var(--u)); }
.field { margin-bottom: calc(14 * var(--u)); }
.field[hidden] { display: none; }
.access input:not([type=checkbox]), .access select {
  width: 100%; height: max(48px, calc(78 * var(--u)));
  font: inherit; font-size: var(--t-field); color: var(--ink);
  background: var(--field); border: max(1px, calc(2 * var(--u))) solid var(--field-line); border-radius: calc(10 * var(--u));
  padding: 0 calc(26 * var(--u));
}
.access input::placeholder { color: var(--placeholder); }
.access select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right calc(28 * var(--u)) center; background-size: max(16px, calc(32 * var(--u)));
}
.access button {
  height: max(52px, calc(86 * var(--u))); width: 100%; margin-top: calc(-6 * var(--u));
  font: inherit; font-weight: 700; font-size: max(18px, calc(44 * var(--u))); letter-spacing: -0.01em; color: #fff;
  background: var(--primary); border: 0; border-radius: calc(12 * var(--u)); cursor: pointer;
  transition: background-color 160ms ease, transform 120ms var(--ease-out);
}
.access button:active { transform: scale(0.98); background: var(--primary-press); }
.access button:disabled { opacity: 0.6; cursor: progress; }
@media (hover: hover) and (pointer: fine) { .access button:hover { background: var(--primary-hover); } }
.invite { margin: calc(12 * var(--u)) 0 0; text-align: center; font-weight: 500; font-size: var(--t-small); }
.invite[data-state="done"] { color: var(--ink-note); }
.invite[data-state="error"] { color: #d92d20; }
.access .consent { display: grid; grid-template-columns: auto 1fr; gap: calc(14 * var(--u)); align-items: start; text-align: left; margin: calc(10 * var(--u)) 0 calc(26 * var(--u)); font-size: max(14px, calc(25 * var(--u))); color: var(--ink-2); line-height: 1.35; }
.consent input { width: max(18px, calc(30 * var(--u))); height: max(18px, calc(30 * var(--u))); margin: 0; flex: none; accent-color: var(--primary); }

/* The closing form writes on the rules: underlines instead of boxes. */
.ruled input:not([type=checkbox]), .ruled select { background-color: transparent; border-width: 0 0 max(1px, calc(3 * var(--u))); border-radius: 0; padding-left: 0; }

/* Pages after the hero: a marbled edge at each page break, the same margin rule, and one real object per page. */
.section-head { margin: 0; font-family: var(--display); font-weight: 800; font-size: max(30px, calc(72 * var(--u))); line-height: 1; letter-spacing: -0.02em; }
.page { position: relative; padding: calc(84 * var(--u)) calc(40 * var(--u)) calc(70 * var(--u)) calc(64 * var(--u)); }
.page::before {
  content: ""; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); top: 0; height: calc(30 * var(--u));
  background: var(--cover) url("assets/plates/marble.png") repeat-x; background-size: calc(632 * var(--u)) calc(82 * var(--u));
}
.page::after { content: ""; position: absolute; top: calc(30 * var(--u)); bottom: 0; left: calc(42.5 * var(--u)); width: max(1px, calc(2 * var(--u))); background: var(--margin); }

.items { list-style: none; margin: calc(30 * var(--u)) 0 0; padding: 0; }
.items li, .items > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(4 * var(--u)) calc(24 * var(--u)); padding: calc(8 * var(--u)) 0; font-size: max(18px, calc(40 * var(--u))); line-height: 1.3; }
.items dt, .items dd { margin: 0; }
.pairs { display: grid; }
.pairs > div { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.hand.inline, .pairs dd { font-family: var(--hand); color: var(--ink-note); font-size: max(18px, calc(40 * var(--u))); line-height: 1.1; transform: rotate(-2deg); }
.detail { margin: calc(20 * var(--u)) 0 0; max-width: 34em; font-size: var(--t-body); color: var(--ink-2); }

.object { position: relative; margin-top: calc(44 * var(--u)); }
.object .tag { position: absolute; margin: 0; font-weight: 500; font-size: var(--t-small); }
.sticky-note {
  position: absolute; display: grid; place-items: center; text-align: center;
  width: calc(230 * var(--u)); height: calc(210 * var(--u)); padding: calc(18 * var(--u));
  font-family: var(--hand); color: #2a2470; font-size: max(20px, calc(46 * var(--u))); line-height: 1;
  box-shadow: calc(6 * var(--u)) calc(14 * var(--u)) calc(22 * var(--u)) var(--shadow); border-radius: calc(2 * var(--u));
}
.sticky-note.blue { background: #90e0ff; }
.sticky-note.yellow { background: var(--sticky); }
.sticky-note.coral { background: #ff5a5f; color: #2a1065; }
.sticky-note > span { padding-bottom: calc(4 * var(--u)); border-bottom: max(2px, calc(4 * var(--u))) solid currentColor; }

/* Cómo funciona: the evening message, as Telegram shows it on the phone. */
.chat-wrap { height: calc(1010 * var(--u)); }
.tg { position: absolute; left: calc(-24 * var(--u)); top: 0; width: calc(600 * var(--u)); height: calc(996 * var(--u)); }
.tg img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(calc(14 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u)) var(--shadow)); }
.chat-wrap .sticky-note { left: calc(560 * var(--u)); top: calc(140 * var(--u)); transform: rotate(7deg); z-index: 2; }
.chat-wrap .tag { left: calc(600 * var(--u)); top: calc(420 * var(--u)); }

/* Qué vas a ver: the real task list, printed and clipped to the page. */
.clipped { height: calc(700 * var(--u)); }
.printout { position: absolute; left: calc(20 * var(--u)); top: calc(70 * var(--u)); width: calc(620 * var(--u)); height: calc(600 * var(--u)); padding: calc(14 * var(--u)); background: #fff; transform: rotate(-2deg); box-shadow: calc(10 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u)) var(--shadow); }
.printout img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.clip {
  position: absolute; left: calc(300 * var(--u)); top: calc(30 * var(--u)); width: calc(34 * var(--u)); height: calc(96 * var(--u)); z-index: 2;
  border: calc(5 * var(--u)) solid #9aa3ad; border-radius: calc(20 * var(--u)); transform: rotate(4deg);
}
.clip::after { content: ""; position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(16 * var(--u)); bottom: calc(22 * var(--u)); border: calc(4 * var(--u)) solid #9aa3ad; border-radius: calc(14 * var(--u)); }
.clipped .tag { left: calc(20 * var(--u)); top: 0; color: var(--ink-note); font-size: max(18px, calc(40 * var(--u))); transform: rotate(-4deg); }
.clipped .sticky-note { left: calc(600 * var(--u)); top: calc(470 * var(--u)); transform: rotate(-6deg); z-index: 2; }

/* Tus datos: no name, locked. */
.locked { height: calc(320 * var(--u)); }
.padlock { position: absolute; left: calc(350 * var(--u)); top: calc(-10 * var(--u)); width: calc(190 * var(--u)); height: auto; transform: rotate(9deg); }
.locked .sticky-note { left: calc(40 * var(--u)); top: 0; width: calc(270 * var(--u)); height: calc(250 * var(--u)); transform: rotate(-6deg); }

.lines { list-style: none; margin: calc(30 * var(--u)) 0 0; padding: 0; }
.lines li { padding: calc(14 * var(--u)) 0; }
.lines p { margin: 0; font-size: max(18px, calc(38 * var(--u))); line-height: 1.35; }
.after-lines { margin: calc(26 * var(--u)) 0 0; font-size: var(--t-body); }
.after-lines a, .lines a { color: var(--ink); text-decoration-color: var(--primary); text-decoration-thickness: max(2px, calc(3 * var(--u))); text-underline-offset: calc(6 * var(--u)); }
.districts .soon p { color: var(--ink-2); }
.districts .soon a { font-weight: 500; }

.faq { margin-top: calc(30 * var(--u)); }
.faq details { border-bottom: max(1px, calc(2 * var(--u))) solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: calc(26 * var(--u)) calc(64 * var(--u)) calc(26 * var(--u)) 0; position: relative;
  font-weight: 700; font-size: max(17px, calc(36 * var(--u))); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
/* A pen-drawn plus in the note ink, turned into a cross when open. */
.faq summary::after {
  --s: max(20px, calc(40 * var(--u)));
  content: ""; position: absolute; right: 0; top: calc(50% - var(--s) / 2); width: var(--s); height: var(--s);
  background: var(--ink-note);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20.5 5c-.6 9.8-.2 20.4.6 30M5 19.6c10.3-.9 20.2-.6 30 .9' fill='none' stroke='black' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20.5 5c-.6 9.8-.2 20.4.6 30M5 19.6c10.3-.9 20.2-.6 30 .9' fill='none' stroke='black' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 220ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 calc(28 * var(--u)); font-size: max(16px, calc(34 * var(--u))); line-height: 1.45; max-width: 34em; }

.closing .access { margin: calc(34 * var(--u)) 0 0; }

.foot .cover-in { height: auto; padding-top: calc(26 * var(--u)); padding-bottom: calc(26 * var(--u)); }
.disclaimer { margin: 0; padding: calc(20 * var(--u)) calc(58 * var(--u)) calc(40 * var(--u)); background: var(--cover); color: #c9ccd3; font-size: max(13px, calc(24 * var(--u))); text-align: center; }

/* Reading pages (privacy): the same sheet, set for reading. Comfortable measure, a margin index, a ruled table. */
.doc { position: relative; padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(90 * var(--u)) calc(64 * var(--u)); max-width: 100%; }
.doc::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(42.5 * var(--u)); width: max(1px, calc(2 * var(--u))); background: var(--margin); }
.doc > *, .doc section > * { max-width: 40rem; }
.doc .draft { margin: 0 0 calc(30 * var(--u)); padding: calc(18 * var(--u)) calc(22 * var(--u)); background: var(--sticky); color: #0b0b0c; font-weight: 700; font-size: var(--t-body); line-height: 1.35; transform: rotate(-0.6deg); box-shadow: calc(4 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u)) var(--shadow); }
.doc .doc-kind { margin: 0 0 calc(8 * var(--u)); font-family: var(--hand); color: var(--ink-note); font-size: max(18px, calc(38 * var(--u))); }
.doc h1 { margin: 0 0 calc(18 * var(--u)); font-family: var(--display); font-weight: 800; font-size: max(32px, calc(80 * var(--u))); line-height: 1; letter-spacing: -0.02em; }
.doc .lead { font-size: max(18px, calc(36 * var(--u))); line-height: 1.45; margin: 0 0 calc(14 * var(--u)); }
.doc .note { color: var(--ink-2); font-size: var(--t-small); }
.doc .toc { margin: calc(30 * var(--u)) 0 calc(20 * var(--u)); padding: calc(20 * var(--u)) 0; border-top: max(1px, calc(2 * var(--u))) solid var(--rule); border-bottom: max(1px, calc(2 * var(--u))) solid var(--rule); }
.doc .toc a { font-family: var(--hand); color: var(--ink-note); font-size: max(17px, calc(34 * var(--u))); text-decoration: none; margin-right: calc(22 * var(--u)); display: inline-block; line-height: 1.6; }
.doc .toc a:hover { text-decoration: underline; }
.doc .toc ul, .doc .toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.doc section { padding-top: calc(36 * var(--u)); scroll-margin-top: 16px; }
.doc h2 { margin: 0 0 calc(12 * var(--u)); font-family: var(--display); font-weight: 800; font-size: max(24px, calc(52 * var(--u))); line-height: 1.08; letter-spacing: -0.01em; }
.doc h3 { margin: calc(22 * var(--u)) 0 calc(6 * var(--u)); font-size: max(17px, calc(34 * var(--u))); font-weight: 700; }
.doc p, .doc li { font-size: var(--t-body); line-height: 1.55; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 0.3em 0; }
.doc li::marker { color: var(--ink-note); }
.doc a { text-decoration-color: var(--primary); text-underline-offset: 0.18em; }
.doc table { width: 100%; max-width: 46rem; border-collapse: collapse; font-size: var(--t-small); display: block; overflow-x: auto; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)) 0; border-bottom: max(1px, calc(2 * var(--u))) solid var(--rule); min-width: 9rem; }
.doc th { font-weight: 700; }

/* Motion: the one authored moment. Violet notes are written in, left to right, like a pen in the margin. */
@keyframes write-in { from { clip-path: inset(-30% 100% -30% 0); } to { clip-path: inset(-30% -10% -30% 0); } }
@keyframes land { from { opacity: 0; transform: translateY(calc(18 * var(--u))); } to { opacity: 1; transform: none; } }
.phone { animation: land 700ms var(--ease-out) 80ms both; }
.stage .note { animation: write-in 760ms var(--ease-out) 420ms both; }
.arrow { animation: write-in 520ms var(--ease-out) 900ms both; }
html.reveal .page .reveal-me { clip-path: inset(-30% 100% -30% 0); transition: clip-path 640ms var(--ease-out); }
html.reveal .page .reveal-me[data-in] { clip-path: inset(-30% -10% -30% 0); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .phone, .stage .note, .arrow { animation: none; }
  html.reveal .page .reveal-me { clip-path: none; }
}