/* ==========================================================================
   Library — Nortefy
   The reading section at /library/. Its own small system, built only from
   the tokens in style.css: no new colours, no raw sizes, no borrowed
   marketing classes. Every rule here is namespaced .lib-*.

   The design brief is plainness. A page in the Library is read once, by
   someone with a problem, often on a phone. One column, one accent, no
   cards, no decoration. Everything on the page is either the answer or a
   way to find the answer.
   ========================================================================== */

/* ---- Page frame ------------------------------------------------------- */

.lib {
  max-width: var(--width-prose);
  margin: 0 auto;
  padding: var(--space-8) var(--container-pad) var(--section-y);
}

/* ---- Hero -------------------------------------------------------------- */
/* The Library's header band, built from the brand's own vocabulary: a fog
   surface ruled like notebook paper (the well-tailored notebook), a
   tailor's stitch under the title, and the logo's clay sun rising on an
   ink horizon at the band's bottom edge. The bottom padding is what keeps
   the text clear of the sun — it rises half its height, always less than
   the padding, so the two can never collide. */

.lib-hero {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--space-6) - var(--bw-hair)),
      color-mix(in srgb, var(--rule) 55%, transparent) calc(var(--space-6) - var(--bw-hair)),
      color-mix(in srgb, var(--rule) 55%, transparent) var(--space-6)
    ),
    var(--surface-alt);
  /* The horizon — same weight the logo draws it with. */
  border-bottom: var(--bw-med) solid var(--ink);
}

.lib-hero-inner {
  max-width: var(--width-prose);
  margin: 0 auto;
  padding: var(--space-10) var(--container-pad);
}

.lib-hero h1 {
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4);
}

/* The one italic word — Fraunces carrying the feeling, Stone so the band
   keeps clay for the sun alone. */
.lib-hero h1 em { color: var(--stone); }

/* The tailor's stitch between title and lede. */
.lib-hero-stitch {
  width: var(--space-10);
  border: 0;
  border-top: var(--hairline-dashed);
  margin: 0 0 var(--space-5);
}

/* The sun, half-risen on the horizon. */
.lib-hero::after {
  content: '';
  position: absolute;
  right: var(--space-10);
  bottom: 0;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-round);
  background: var(--clay);
  box-shadow: 0 0 0 var(--space-3) var(--accent-tint);
  transform: translateY(50%);
  animation: lib-sunrise 1s ease-out;
}

@keyframes lib-sunrise {
  from { transform: translateY(88%); }
  to   { transform: translateY(50%); }
}

.lib-lede {
  font-family: var(--font-serif);
  font-size: var(--fs-lede);
  line-height: var(--lh-relaxed);
  color: var(--muted-color);
  margin-bottom: 0;
}

/* Kicker above the H1 — the archivist voice, same as the marketing pages. */
.lib-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-4);
}

.lib-kicker a {
  color: inherit;
  text-decoration: none;
}

.lib-kicker a:hover { text-decoration: underline; }

/* ---- Listen ------------------------------------------------------------ */
/* Injected by /js/library-tts.js only when the browser can speak, so no
   reader ever sees a dead control. The highlight follows the block being
   read — for this audience, hearing and seeing the same line is the point. */

.lib-listen {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.lib-listen button {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--accent-text);
  background: var(--card-bg); /* it sits on the hero's fog now */
  border: var(--hairline);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: border-color 0.15s ease-in-out;
}

.lib-listen button:hover { border-color: var(--clay); }

/* The block currently being read aloud. The shadow pads the wash beyond
   the text without shifting the layout. */
.tts-active {
  background: var(--accent-tint);
  border-radius: var(--radius-xs);
  box-shadow: 0 0 0 6px var(--accent-tint);
}

@media (prefers-reduced-motion: reduce) {
  .lib-listen button { transition: none; }
}

/* ---- Quick answer ----------------------------------------------------- */
/* The highest-value block on the page: what a snippet pulls and what a
   model quotes. Marked with the clay edge so it reads as the answer and
   not as an aside. */

.lib-answer {
  background: var(--surface-alt);
  border-left: var(--bw-rule) solid var(--clay);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-10);
}

.lib-answer p {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-prose);
  margin-bottom: var(--space-4);
}

.lib-answer p:last-child { margin-bottom: 0; }

/* ---- The short version -------------------------------------------------- */
/* A scannable map of the page between the quick answer and the body — the
   quick answer states the conclusion, this box lets a reader decide whether
   the long read is for them. Paper on oyster, hairline, no wash: it must
   read lighter than the quick answer above it, not compete with it. */

.lib-summary {
  background: var(--card-bg);
  border: var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-10);
}

.lib-summary-title {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted-color);
  font-weight: var(--fw-regular);
  margin-bottom: var(--space-4);
}

.lib-summary ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lib-summary li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

.lib-summary li:last-child { margin-bottom: 0; }

.lib-summary li::before {
  content: '\2014'; /* em dash — the notebook's own bullet */
  position: absolute;
  left: 0;
  color: var(--accent-text);
}

/* ---- Prose ------------------------------------------------------------ */
/* No inner measure: the .lib frame is already ~62ch of Fraunces at this
   size, which is the manifesto's proven reading setting. A second, narrower
   column inside it only makes the left edge ragged against the header. */

.lib-body h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
  margin-top: var(--space-10);
  margin-bottom: var(--space-5);
}

.lib-body > h2:first-child { margin-top: 0; }

.lib-body h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-style: italic;
  color: var(--stone);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.lib-body p,
.lib-body ul,
.lib-body ol {
  font-family: var(--font-serif);
  font-size: var(--fs-h5);
  line-height: var(--lh-prose);
  margin-bottom: var(--space-6);
}

.lib-body ul,
.lib-body ol { padding-left: var(--space-6); }

.lib-body li { margin-bottom: var(--space-4); }

.lib-body strong {
  font-weight: var(--fw-medium);
  color: var(--stone);
}

.lib-body a {
  color: var(--accent-text);
  text-decoration-thickness: var(--bw-hair);
  text-underline-offset: 0.15em;
}

/* ---- Table ------------------------------------------------------------ */
/* Comparisons go in a table on purpose: search engines and language models
   both extract one cleanly, where they paraphrase prose. */

.lib-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

.lib-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
}

.lib-table th,
.lib-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--hairline);
  vertical-align: top;
}

.lib-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted-color);
  font-weight: var(--fw-regular);
  white-space: nowrap;
}

.lib-table tr:last-child td { border-bottom: none; }

/* ---- FAQ -------------------------------------------------------------- */
/* Visible text must match the FAQPage structured data exactly, so this is
   plain markup with nothing generated or collapsed. */

.lib-faq {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: var(--hairline);
}

.lib-faq h2 { margin-top: 0; }

.lib-faq dt {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.lib-faq dd {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-prose);
  margin: 0;
  color: var(--ink);
}

/* ---- Close ------------------------------------------------------------ */
/* The page's only call to action. One, at the end, or none. */

.lib-close {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: var(--hairline);
}

/* After the index list, the list's own last hairline already closes it —
   a second rule below reads as an empty row, and the doubled padding
   leaves a hole. */
.lib-list + .lib-close {
  border-top: none;
  padding-top: 0;
  margin-top: var(--space-8);
}

.lib-close p {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-prose);
  margin-bottom: var(--space-5);
}

/* ---- Footer meta ------------------------------------------------------ */

.lib-meta {
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--muted-color);
}

/* Present only on a page that has actually been revised. It reads darker
   than the publication date because for a reader deciding whether a page is
   still current, the revision date is the one that answers the question. */
.lib-meta-updated { color: var(--ink); }

/* ---- Index ------------------------------------------------------------ */
/* A flat list, newest last. No cards, no thumbnails, no excerpt teasers —
   the title is the question and the line under it is the answer's shape. */

.lib-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: var(--hairline);
}

.lib-list li { border-bottom: var(--hairline); }

/* Classed on purpose. style.css gives every unclassed anchor inside a main
   <li> the prose-link treatment — accent colour and a permanent underline —
   and states that classed anchors opt out. A whole index row underlined in
   clay is not a prose link, so it takes the opt-out. */
.lib-list-link {
  display: block;
  padding: var(--space-5) 0;
  text-decoration: none;
  color: inherit;
}

.lib-list-link:hover .lib-list-title { color: var(--accent-text); }

.lib-list-title {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-2);
  transition: color 0.15s ease-in-out;
}

.lib-list-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--muted-color);
}

/* Grouping label between tiers on the index. */
.lib-group {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted-color);
  margin: var(--space-8) 0 var(--space-4);
}

/* ---- Phone ------------------------------------------------------------ */

@media (max-width: 768px) {
  .lib { padding-top: var(--space-6); }

  .lib-hero-inner { padding: var(--space-8) var(--container-pad); }

  .lib-hero h1 { font-size: var(--fs-h2); }

  .lib-hero::after {
    width: var(--space-10);
    height: var(--space-10);
    right: var(--space-5);
  }

  .lib-body h2 { font-size: var(--fs-h3); }

  .lib-body p,
  .lib-body ul,
  .lib-body ol,
  .lib-faq dd,
  .lib-close p { font-size: var(--fs-body-lg); }

  .lib-answer { padding: var(--space-4) var(--space-5); }

  .lib-summary { padding: var(--space-4) var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .lib-list-title { transition: none; }
  .lib-hero::after { animation: none; }
}