/* ==========================================================================
   NEGUSTOLONOW — site/css/name.css
   name.html only: the house's own page, where the name is explained once, in
   body type, with its sources. Every class is prefixed .name- ; every override
   of a shared class is scoped under body[data-page="name"]. Tokens only: no
   new colour values, no radius, no shadow, no gradient, no motion.

   THE TYPE RULE (stated in full in css/house.css) applies with one reading
   peculiar to this page. Display scale carries a NAME or a NUMBER out of a
   world; NEGUSTOLONOW is a name, and it is the mark on every page, so it may
   be large. On the page that explains it, it is set at room size (--t-large,
   the scale of a room heading) and no larger: mega type would make a poster
   of the thing being explained. Nothing else on the page rises above micro
   type: the sources' group labels are mono at --t-micro.

   THE NAME'S HARD LINES (universe/_planning/2026-09-22/00-state-of-the-house.md
   §3.6) as they touch this stylesheet: the Ge'ez word inside the paragraph is
   never enlarged, coloured, or set apart. It is a word in a sentence; nothing
   here styles [lang="am"] beyond keeping it upright. No regalia, no ornament.
   ========================================================================== */

/* 1. THE SURFACE ------------------------------------------------------------- */
body[data-page="name"] .name-open { padding-top: var(--s-7); padding-bottom: var(--s-7); }
body[data-page="name"] .name-open__mark {
  margin-top: var(--s-3);
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-large); line-height: 0.9;
  letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: anywhere;
  font-feature-settings: "kern", "lnum";
}
/* how it is said, and whose mouth that is: one typed line, two clauses, breaking to two lines on a phone */
body[data-page="name"] .name-open__said { margin-top: var(--s-4); color: var(--ink-soft); max-width: 34rem; }
body[data-page="name"] .name-open__aloud { display: inline-block; color: var(--ink); }
body[data-page="name"] .name-open__ours { display: inline-block; }
@media (max-width: 47.99rem) {
  body[data-page="name"] .name-open__aloud, body[data-page="name"] .name-open__ours { display: block; }
}

/* 2. THE READING ------------------------------------------------------------- */
body[data-page="name"] .name-read { padding-top: var(--s-7); padding-bottom: var(--s-8); border-top: var(--rule-hair) solid var(--hair); }
body[data-page="name"] .name-read__prose p { font-size: var(--t-body); line-height: 1.62; }
/* the pieces are marked in the running text and nowhere else. Spectral loads no 700, so <b> is set at the 500 the page has, not a synthetic bold */
body[data-page="name"] .name-read__prose b { font-weight: 500; }
body[data-page="name"] .name-read__prose i { font-style: italic; }
body[data-page="name"] .name-read__prose [lang="am"] { font-style: normal; font-weight: 400; }
/* the door lands on a paragraph, under the header: the root already pads for it */
body[data-page="name"] .name-read__prose p:target { box-shadow: inset 4px 0 0 var(--accent); padding-left: var(--s-3); }

/* 3. THE TWO FOLDS ----------------------------------------------------------- */
body[data-page="name"] .name-fold { max-width: 46rem; }
body[data-page="name"] .name-fold:first-of-type { margin-top: var(--s-8); }

/* what we keep to: ruled lines, the same rule under each, nothing numbered and nothing boxed */
body[data-page="name"] .name-rules { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--line); max-width: var(--measure); }
body[data-page="name"] .name-rules li { padding-block: 0.7rem 0.65rem; border-bottom: var(--rule-hair) solid var(--hair); font-size: var(--t-body); line-height: 1.5; }

/* the sources: five short groups, a typed label over each, one address per line */
body[data-page="name"] .name-sources { display: grid; gap: var(--s-5); }
body[data-page="name"] .name-sources > * + * { margin-top: 0; }
body[data-page="name"] .name-sources__h { margin: 0 0 var(--s-2); font-family: var(--f-mono); font-weight: 400; font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
body[data-page="name"] .name-sources__list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--hair); }
body[data-page="name"] .name-sources__list li { padding-block: 0.45rem 0.4rem; border-bottom: var(--rule-hair) solid var(--hair); font-family: var(--f-mono); font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
body[data-page="name"] .name-sources__list a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
body[data-page="name"] .name-sources__list a:hover, body[data-page="name"] .name-sources__list a:focus-visible { color: var(--ink); }
body[data-page="name"] .name-sources__list i { font-style: italic; }

/* 4. PRINT ------------------------------------------------------------------- */
@media print {
  body[data-page="name"] .name-fold[open] > .fold__summary .fold__act { display: none; }
  body[data-page="name"] .name-sources__list a::after { content: " " attr(href); font-size: 0.72rem; color: var(--ink-faint); }
}