/* =============================================================================
   HighlightMe — Privacy page (privacy.html)
   A narrow, readable document. Loaded after styles.css.
   ========================================================================== */

/* This page reads like a document, so its container is narrower than the
   site-wide --maxw. Overriding .wrap here (loaded after styles.css) keeps the
   header, body, and footer aligned to the same reading column. */
.wrap { max-width: 760px; }

/* Body links are coral within the document; scoped so it doesn't affect the
   header/footer components (which set their own colors). */
.doc a { color: var(--accent); }
.doc a:hover { text-decoration: underline; }

/* Header "back" link */
.back {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.back:hover { color: var(--ink); }

/* -----------------------------------------------------------------------------
   Document
   -------------------------------------------------------------------------- */
.doc { padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem); }

.doc .eyebrow {
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 1rem;
}
.doc h1 { font-size: var(--step-3); line-height: 1.05; letter-spacing: -.02em; font-weight: 800; margin: 0 0 .6rem; text-wrap: balance; }
.updated { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--muted); margin: 0 0 2.5rem; }
.intro { color: var(--ink-2); font-size: 1.12rem; max-width: 62ch; }

.doc h2 { font-size: 1.35rem; letter-spacing: -.01em; margin: 2.8rem 0 .8rem; text-wrap: balance; }
.doc section:first-of-type h2 { margin-top: 1rem; }
.doc p { color: var(--ink-2); max-width: 64ch; }
.doc p b, .doc li b { color: var(--ink); font-weight: 600; }
.doc hr { border: 0; border-top: 1px solid var(--hairline); margin: 3rem 0; }

/* -----------------------------------------------------------------------------
   "The short version" summary card
   -------------------------------------------------------------------------- */
.tldr {
  margin: 2.5rem 0 3rem;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%),
    var(--surface);
  border: 1px solid var(--hairline-2); border-radius: 14px;
  padding: 1.6rem 1.7rem;
}
.tldr h2 { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--live); margin: 0 0 1rem; }
.tldr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.tldr li { display: flex; gap: .75rem; color: var(--ink-2); }
.tldr li svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--live); margin-top: 4px; }