/* ============================================================
   Looksmith — /notes
   Loaded only by generated pages, never by the eleven that were
   here first. styles.css is not modified by any of this.

   A guide is <article class="doc guide">, so the whole register
   comes from the legal pages: same 46rem measure, same Fraunces
   headings, same hairline tables, same monospace for literals.
   What is below only removes the parts that are specific to a
   policy, and adds the few parts a guide has that a policy does
   not have.
   ============================================================ */

/* .doc numbers its h2s, because a clause has to be citable as "section 7".
   A guide's headings are questions and statements, and "3. Does it work on
   dark skin?" reads as a form. */
.note h2::before {
  content: none;
  margin-right: 0;
}

/* .doc sets h3 as an uppercase sans label, which suits a subsection of a
   policy. In a guide an h3 is a question a reader actually asked, so it stays
   in the serif and stays sentence case. A question typeset as a caption does
   not read as a question. */
.note h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem);
  font-weight: 560;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  margin: 1.9rem 0 0.5rem;
}

/* The one line that says where you are. There is no link to /notes anywhere
   on the site, so for a reader who arrived from a search result this is the
   only visible sign that the page belongs to a set. */
.note__eyebrow {
  margin: 0 0 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.note__eyebrow a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 160ms ease;
}

.note__eyebrow a:hover {
  color: var(--ink);
}

/* Contents. Unnumbered, unlike .doc__toc, and only rendered when there are
   more than two sections to jump between. */
.note__toc {
  margin: 0 0 2.4rem;
  padding: 0 0 1.4rem;
  border-bottom: 1px solid var(--hairline);
}

.note__toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2.4rem;
}

.note__toc li {
  break-inside: avoid;
  margin-bottom: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.note__toc a {
  transition: color 160ms ease;
}

.note__toc a:hover {
  color: var(--ink);
}

@media (max-width: 640px) {
  .note__toc ul { columns: 1; }
}

/* A quotation is the one place a guide cites somebody else, and it has to be
   visibly not our sentence. A rule on the left, no italics: the italic
   Fraunces is a 150 KB face this page does not load. */
.note blockquote {
  margin: 1.3rem 0;
  padding-left: 1.2rem;
  border-left: 1px solid var(--hairline);
}

.note blockquote p {
  margin: 0;
}

/* In-body links. .doc leaves anchors unstyled because a policy's links are
   incidental; in a guide they carry the internal linking that the site's
   navigation deliberately does not. */
.note p a,
.note li a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--ink-pale);
  color: var(--ink);
  transition: text-decoration-color 160ms ease;
}

.note p a:hover,
.note li a:hover {
  text-decoration-color: var(--ink);
}

/* Related reading, and the index on the hub. Same list, two contexts. */
.note__related {
  margin: 3rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
}

.note__related h2 {
  font-size: 0.78rem;
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.8rem;
}

/* .doc ul indents by 1.3rem to make room for a bullet. These lists have no
   bullet, so the indent is just a ragged left edge against the headings. */
.note__related ul,
.note__index {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.note__related li {
  margin-bottom: 0.45rem;
  color: var(--ink-soft);
}

.note__related a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--ink-pale);
  transition: text-decoration-color 160ms ease;
}

.note__related a:hover {
  text-decoration-color: var(--ink);
}

/* The hub's list: title on its own line, the page's own summary under it, so
   the index answers "which of these do I want" without a click. */
.note__index li {
  margin: 0 0 1.3rem;
}

.note__index a {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--ink-pale);
  transition: text-decoration-color 160ms ease;
}

.note__index a:hover {
  text-decoration-color: var(--ink);
}

.note__index-note {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* The one place a guide sells anything. Same underlined-text grammar as the
   home page: no pill, no box, no colour. */
.note__cta {
  margin: 3rem 0 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--ink);
}

.note__cta > p {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1.2rem;
}

/* .waitlist centres itself on the home stage. Here it is one element in a
   left-aligned column of prose. */
.note__waitlist {
  justify-content: flex-start;
  margin-top: 0;
}

.note__waitlist .waitlist__form {
  width: 100%;
  max-width: 26rem;
}

.note__about {
  margin: 1.4rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.note__about a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--ink-pale);
  transition: text-decoration-color 160ms ease;
}

.note__about a:hover {
  text-decoration-color: var(--ink);
}

/* The hub has no article body, so its first h2 does not need the 2.4rem of
   air that separates a section from the paragraph above it. */
.note--index h2:first-of-type {
  margin-top: 1.2rem;
}

/* ---------------- CJK ----------------

   Fraunces and Inter are Latin-only, so on the Japanese, Korean and Chinese
   editions every character outside the Latin range falls through to whatever
   the browser maps `serif` and `sans-serif` to. That is a different typeface
   per operating system and, on several of them, an ugly one.

   The Latin faces stay first in each stack. A heading that reads
   "Looksmith とは" then sets Looksmith in Fraunces and the kana in a mincho,
   which is what a bilingual line is supposed to do.

   Scoped to .note, so none of this can reach the eleven frozen pages. They
   are English and there is no CJK on them to fall back from. */

/* GenRyuMin (源流明體) by ButTaiwan, SIL OFL 1.1, derived from Source Han Serif.
   It is the CJK counterpart of Fraunces here: a mincho for the identity slot,
   which on a guide is the headings and the lead paragraph. Body copy stays in
   the sans slot, where the .doc pages already put it.

   Subset by scripts/build-fonts.mjs against the real generated text, because
   the source is a 20 MB collection and the CSP forbids a CDN. Two files, not
   four: TW and JP map 122 codepoints to different glyphs, so Japanese needs
   its own face, while Korean and Simplified Chinese share the TW file. Hangul
   has no regional variants; Simplified Chinese does, and this family has no
   mainland cut, so those 122 codepoints carry Taiwan forms on zh-Hans. That is
   a known compromise, written down rather than hidden.

   The weight range is declared rather than a single value: the headings ask
   for 500 and .note h3 asks for 560, and a static face declared at one weight
   would have the browser synthesise the other. Synthetic bold on a mincho is
   ugly in a way that is hard to unsee. */
@font-face {
  font-family: "GenRyuMin TW";
  src: url("/fonts/genryumin-tw.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GenRyuMin PJP";
  src: url("/fonts/genryumin-pjp.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Fraunces stays first in every stack. It has no CJK glyphs, so it takes the
   Latin and falls through for everything else, which is what makes a heading
   reading "Looksmith とは" set the brand in Fraunces and the kana in a mincho.
   The system faces after GenRyuMin are what renders during the swap and if the
   subset were ever short a glyph. */
html[lang^="ja"] .note {
  --font-serif: "Fraunces", "GenRyuMin PJP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  --font-sans: "Inter", "Hiragino Sans", "Yu Gothic", YuGothic, "Noto Sans JP", sans-serif;
}

html[lang^="ko"] .note {
  --font-serif: "Fraunces", "GenRyuMin TW", "Nanum Myeongjo", "Apple SD Gothic Neo", "Noto Serif KR", serif;
  --font-sans: "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

html[lang="zh-Hant"] .note {
  --font-serif: "Fraunces", "GenRyuMin TW", "Songti TC", "Microsoft JhengHei", "Noto Serif TC", serif;
  --font-sans: "Inter", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}

html[lang="zh-Hans"] .note {
  --font-serif: "Fraunces", "GenRyuMin TW", "Songti SC", "Microsoft YaHei", "Noto Serif SC", serif;
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* CJK glyphs fill their em box, so leading tuned for Latin reads as cramped.
   The heading rule in styles.css is 1.08, which on a two-line Japanese title
   sets the lines almost touching. */
html[lang^="ja"] .note h1, html[lang^="ja"] .note h2, html[lang^="ja"] .note h3,
html[lang^="ko"] .note h1, html[lang^="ko"] .note h2, html[lang^="ko"] .note h3,
html[lang^="zh"] .note h1, html[lang^="zh"] .note h2, html[lang^="zh"] .note h3 {
  line-height: 1.35;
  /* text-wrap: balance on a script with no spaces gives the browser nothing to
     balance on, and Safari has shipped odd break positions for it. */
  text-wrap: normal;
}

html[lang^="ja"] .note p, html[lang^="ja"] .note li, html[lang^="ja"] .note td,
html[lang^="ko"] .note p, html[lang^="ko"] .note li, html[lang^="ko"] .note td,
html[lang^="zh"] .note p, html[lang^="zh"] .note li, html[lang^="zh"] .note td {
  line-height: 1.9;
}

/* No hyphenation and no mid-word breaking: CJK wraps between characters and
   needs neither, and letter-spacing tuned for Latin loosens the grid. */
html[lang^="ja"] .note, html[lang^="ko"] .note, html[lang^="zh"] .note {
  letter-spacing: normal;
  hyphens: none;
  -webkit-hyphens: none;
}