/* ══════════════════════════════════════════════════════════════════════
   The pharmacy, in words — the homepage as plain reading.

   Sits on the shared palette in css/yamero.css and the self-hosted faces in
   fonts.css. The room this page is in is a page: one column, generous
   leading, links that stay links. Everything the rendered site does with
   depth, this does with hierarchy, because a reader who is here either
   cannot see the rooms or does not want them.
   ══════════════════════════════════════════════════════════════════════ */

body.in-words {
  background:
    radial-gradient(110% 60% at 50% -10%, oklch(77.3% 0.113 301.5 / 0.06), transparent 64%),
    var(--void);
  color: var(--ink);
  font-family: var(--f-body, 'Zen Kaku Gothic New', system-ui, sans-serif);
  min-height: 100vh;
  margin: 0;
}

.in-words-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.2rem 1.3rem 6rem;
  font-size: 1.02rem;
  line-height: 1.85;
}

.in-words-home {
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  margin: 0 0 2.6rem;
}

.in-words-page h1 {
  font-size: 1.9rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 2rem;
}

.in-words-page h2 {
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--pink-soft);
  margin: 3.4rem 0 1rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid oklch(77% 0.159 351.9 / 0.22);
}

.in-words-page h3 {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--cyan);
  margin: 2.6rem 0 0.7rem;
}

.in-words-page h4 {
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 2rem 0 0.4rem;
}

.in-words-page p { margin: 0 0 1.25rem; }

.in-words-page strong { color: var(--ink); font-weight: 600; }

.in-words-page em { color: var(--ink-soft); font-style: italic; }

.in-words-page a {
  color: var(--lilac-soft);
  text-decoration-color: oklch(77.3% 0.113 301.5 / 0.45);
  text-underline-offset: 0.18em;
}

.in-words-page a:hover { color: var(--pink-soft); text-decoration-color: currentColor; }

.in-words-page a:visited { color: var(--lilac); }

.in-words-page blockquote {
  margin: 2.4rem 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 2px solid oklch(85.7% 0.103 190.8 / 0.4);
  color: var(--cyan);
  font-size: 1.04rem;
}

.in-words-page blockquote p { margin: 0; }

@media (max-width: 640px) {
  .in-words-page { padding: 1.6rem 1.05rem 4.5rem; line-height: 1.78; }
  .in-words-page h1 { font-size: 1.55rem; }
  .in-words-page h2 { font-size: 1.15rem; margin-top: 2.6rem; }
}