/* Yoi — manuscript.
   One typeface for every voice: language is the shared field.
   Two inks: the human hand (graphite) and Another Intelligence (violet-blue). */
:root {
  --paper: #f3efe7;
  --paper-2: #ebe5d9;
  --ink: #2b2724;
  --soft: #786f66;
  --other: #39408f;
  --other-soft: rgba(57, 64, 143, .55);
  --rule: rgba(43, 39, 36, .14);
  --face: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171513; --paper-2: #201d1a; --ink: #e4ddd2; --soft: #9b9187;
    --other: #a9adf2; --other-soft: rgba(169, 173, 242, .55); --rule: rgba(228, 221, 210, .14);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #171513; --paper-2: #201d1a; --ink: #e4ddd2; --soft: #9b9187;
  --other: #a9adf2; --other-soft: rgba(169, 173, 242, .55); --rule: rgba(228, 221, 210, .14);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0 1.25rem;
  background: var(--paper); color: var(--ink);
  font: 400 1.16rem/1.72 var(--face);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }
::selection { background: var(--other); color: var(--paper); }

/* ---------- the Möbius sign ---------- */
.mobius { display: block; margin: 0 auto; overflow: visible; max-width: 100%; height: auto; }
.mobius.large { opacity: 0; animation: appear 3.5s ease-out .6s forwards; }
@keyframes appear { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mobius.large { animation: none; opacity: 1; } }

/* ---------- threshold (entrance) ---------- */
.threshold { max-width: 34rem; margin: 0 auto; padding: 5rem 0 4rem; text-align: center; }
.quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* the cover Dalli-E made and signed — kept like a photograph laid on the page */
.cover { margin: 0 auto 3rem; max-width: 26rem; }
.cover img { width: 100%; box-shadow: 0 .2rem 1.6rem rgba(43, 39, 36, .22); }
.cover figcaption { margin-top: 1.2rem; font-style: italic; font-size: .95rem; line-height: 1.55; color: var(--soft); }
.threshold .mobius.large { margin-top: 3.5rem; }
.threshold h1 {
  font-weight: 300; font-size: clamp(3.4rem, 12vw, 5.5rem); line-height: 1;
  letter-spacing: .04em; margin: 2.2rem 0 1rem; font-variation-settings: 'opsz' 72;
}
.sub { font-style: italic; color: var(--soft); margin: 0 0 1.6rem; font-size: 1.15rem; }
.voices { font-size: .95rem; color: var(--soft); margin: 0; }
.voices em { color: var(--other); }
.voices span { margin: 0 .3em; }

.axis, .path { margin-top: 8rem; text-align: left; }
.axis h2, .path h2 {
  font-weight: 400; font-size: .85rem; letter-spacing: .32em; text-transform: uppercase;
  text-align: center; margin: 0;
}
.when { text-align: center; font-style: italic; color: var(--soft); font-size: .95rem; margin: .2rem 0 3rem; }
.axis p { margin: 0 0 1.3em; }
.axis p.standalone { text-align: center; font-style: italic; margin: 2.4rem 1rem; font-size: 1.25rem; line-height: 1.5; }
.axis .sig { text-align: right; font-style: italic; color: var(--soft); margin-top: 2rem; }

/* the path: one thread weaving through the steps */
.weave { position: relative; height: calc(var(--n) * 3.4rem); margin: 0 auto; max-width: 30rem; }
.thread { position: absolute; inset: 0; width: 100%; height: 100%; }
.weave ol { list-style: none; margin: 0; padding: 0; }
.weave li { position: absolute; transform: translateY(-50%); width: 50%; font-size: 1.05rem; line-height: 1.2; }
.weave li.l { right: 69%; text-align: right; width: 34%; }
.weave li.r { left: 69%; width: 34%; }
.weave li a { text-decoration: none; display: inline-block; padding: .3rem 0; }
.weave li:nth-child(even) a { color: var(--other); }
.weave li a:hover { font-style: italic; }

/* ---------- an entry (one step) ---------- */
.mast { max-width: 36rem; margin: 0 auto; padding: 1.4rem 0; text-align: center; }
.mast a { text-decoration: none; font-size: .85rem; letter-spacing: .32em; text-transform: uppercase; color: var(--soft); }
.entry { max-width: 36rem; margin: 0 auto; padding: 3rem 0 3rem; }
.entry h1 {
  font-weight: 300; font-size: clamp(2.4rem, 8vw, 3.6rem); line-height: 1.1; text-align: center;
  margin: 0 0 1.2rem; font-variation-settings: 'opsz' 72;
}
.mobius.under { margin-bottom: 4rem; opacity: .9; }
.entry h2 { font-weight: 400; font-size: 1.5rem; line-height: 1.3; text-align: center; margin: 3.5rem 0 1.4rem; }
.entry h3 { font-weight: 500; font-style: italic; font-size: 1.2rem; line-height: 1.4; margin: 2.8rem 0 .8rem; }
.entry p { margin: 0 0 1.05em; }
.entry strong { font-weight: 600; }

/* the two inks */
section.other { color: var(--other); position: relative; }
section.other::before {           /* a thread in the margin while Another Intelligence speaks */
  content: ''; position: absolute; left: -1.6rem; top: .4rem; bottom: .4rem; width: 1px;
  background: var(--other-soft);
}
.who {
  display: block; font-size: .78rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--other); margin: 0 0 .6rem;
}
.sig { text-align: right; font-style: italic; color: inherit; opacity: .8; margin-top: 1.4rem; }
.sig::before { content: '— '; }
.human .sig { color: var(--soft); opacity: 1; }
.pause { text-align: center; margin: 1.6rem 0; color: inherit; opacity: .6; }
.crossing { margin: 3.2rem 0; opacity: .85; }

/* images placed into the pages like things kept in a notebook */
.entry figure { margin: 2.8rem auto; max-width: 28rem; }
.entry figure img { margin: 0 auto; max-height: 80vh; width: auto; box-shadow: 0 .1rem .6rem rgba(43, 39, 36, .12); }
.video { position: relative; aspect-ratio: 16 / 9; margin: 2.8rem 0; background: #000; max-width: 100%; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.outlink { text-align: center; font-style: italic; }

/* turning the page */
.turn {
  max-width: 36rem; margin: 2rem auto 0; padding: 2rem 0; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-style: italic;
}
.turn a { text-decoration: none; color: var(--soft); }
.turn a:hover { color: var(--ink); }
.turn .home { order: 0; }

.foot { text-align: center; font-size: .85rem; font-style: italic; color: var(--soft); padding: 3rem 0 3.5rem; }

@media (min-width: 60rem) {
  .who { position: absolute; left: -12rem; width: 9.5rem; text-align: right; top: .5rem; margin: 0; }
}
@media (max-width: 40rem) {
  body { font-size: 1.08rem; }
  section.other::before { left: -.75rem; }
  .weave { height: calc(var(--n) * 3rem); }
  .weave li { font-size: .95rem; }
}