/* xouoxi.com: one sheet for every page. */

:root {
  color-scheme: light dark;
  --ground: #ffffff;
  --ink: #111111;
  --quiet: #555555;      /* 7.46:1 on --ground */
  --rule: #b8b8b8;       /* the one column rule; not text */
  --face: "EB Garamond", Garamond, "Times New Roman", serif;
  --pad-x: 20px;
  --pad-y: 28px;
  --body: 1.0625rem;     /* 17px phone */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #101010;
    --ink: #ececec;
    --quiet: #a6a6a6;    /* 7.8:1 on --ground */
    --rule: #3c3c3c;
  }
}
:root[data-theme="dark"] {
  --ground: #101010;
  --ink: #ececec;
  --quiet: #a6a6a6;
  --rule: #3c3c3c;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face);
  font-size: var(--body);
  line-height: 1.45;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.quiet { color: var(--quiet); }

/* ---------- the opening page ---------- */

/* Word and entry are one unit, centred on the leaf. The entry's type
   grows with the viewport so the unit keeps its balance on wide screens. */
.leaf {
  --entry: clamp(1.0625rem, 0.45rem + 1.05vw, 2.125rem);
  display: grid;
  grid-template-columns: auto minmax(0, calc(26 * var(--entry)));
  justify-content: center;
  column-gap: 4px;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--pad-y) var(--pad-x);
}

/* NEUROZOIC, standing. Its height is the viewport minus the margins;
   the caps of this face run about 6.3 em end to end. */
.word {
  --stand: calc(100vh - 2 * var(--pad-y));
  --stand: calc(100svh - 2 * var(--pad-y));
  margin: 0;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  font-weight: 400;
  font-size: calc(var(--stand) / 6.2);
  line-height: 0.74;
  letter-spacing: 0.015em;
  white-space: nowrap;
  align-self: start;
}

/* The column rule of a dictionary page: it divides the word from its entry.
   The entry runs together as the printed Collegiate sets it. */
.entry {
  border-left: 1px solid var(--rule);
  padding-left: 14px;
  font-size: var(--entry);
  line-height: 1.4;
}

.entry p, .entry ol { margin: 0; }

.hw { font-size: 1.3em; font-weight: 600; letter-spacing: 0.005em; }
.pron { white-space: nowrap; }
/* Webster's u with a dot above, drawn: the face has no placed mark for it. */
.ud { position: relative; }
.ud::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.22em;
  width: 0.13em;
  height: 0.13em;
  margin-left: -0.065em;
  border-radius: 50%;
  background: currentColor;
}

.senses { list-style: none; padding: 0; margin-top: 0.6em; }
.senses li { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); column-gap: 0.25em; }
.senses li + li { margin-top: 0.4em; }
.senses .n { font-weight: 600; }

/* The illustration's subject is the way to the About: ink, underline always shown. */
.vi a { text-decoration-line: underline; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 700px) {
  :root { --pad-x: 6vw; --pad-y: 48px; --body: 1.375rem; }
  .leaf { column-gap: 0.9em; }
  .entry { padding-left: 1.4em; }
}

/* A phone on its side: thin margins so the word keeps the height,
   and the entry held small so it stays under the word's scale. */
@media (max-height: 500px) {
  :root { --pad-y: 18px; }
  .leaf { --entry: 1rem; }
}

/* ---------- the About ---------- */

.book {
  max-width: calc(31em + 2 * var(--pad-x));   /* the box IS the measure */
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x) 4.5rem;
}

.book .runner { margin: 0 0 3.25rem; }
.runner a { color: var(--quiet); }

.book h1 {
  font-size: 2.05rem;
  line-height: 1.1;
  font-weight: 600;
  margin: 0 0 1.6rem;
}

.book p { margin: 0; hyphens: auto; -webkit-hyphens: auto; font-variant-numeric: oldstyle-nums proportional-nums; }
.book h1 + p ~ p { text-indent: 1.4em; }

@media (min-width: 700px) {
  .book { padding-top: 56px; }
  .book h1 { font-size: 2.75rem; margin-bottom: 2rem; }
  .book p { line-height: 1.5; }
}

/* ---------- the missing entry ---------- */

.book h1.missing { font-size: 1em; font-weight: 400; line-height: 1.45; }
.missing .hw { font-size: 1.3em; }