/* Adam Blue Plugins: the Hairline layer for the whole site (2026-09-15)
   Loaded on every page right after css/style.css. Everything is scoped under
   body.hl-site, so it does nothing on textmaker.html (body.tm-page), which
   carries the reference implementation in css/tm-core.css.

   The look: open hairline bands, 1px rules, vertical hairline dividers inset
   from the rules, one soft ice light per band, light gradient numerals,
   tracked uppercase labels and quiet notes. No glass, no blur, no pill chips,
   no filled cards, no glow shadows. The white purchase pill is the only pill.

   Contents
     1. tokens
     2. primitives: .hl-sec .hl-head .hl-head-grid .hl-lede .hl-band .hl-quiet
        .hl-cols .hl-col .hl-num .hl-label .hl-note .hl-rows .hl-link .hl-opts
        .hl-opt .hl-frame .hl-caption .hl-field .hl-sr
     3. site chrome: header, tooltips, type, buttons, pills, glass surfaces,
        details, footer, cosmic divider, ornaments, command palette, dot rail
*/

/* ============================================================
   1. TOKENS (the effective values textmaker.html uses)
   ============================================================ */
.hl-site {
  --line: rgba(143, 208, 255, 0.16);
  --hl-rule: rgba(143, 208, 255, 0.12);
  --hl-ice: #cdd8ff;
  --hl-eyebrow: #b3c4ff;
  --hl-lede: #d7defc;
  --hl-body: #c9d2f5;
  --hl-soft: #bdc8f0;
  --hl-bright: #f4f7ff;
  --hl-stage: #03050f;
  --hl-radius: 16px;
  --hl-solid: rgba(4, 6, 20, 0.88);
  --hl-light: linear-gradient(90deg, transparent, rgba(205, 216, 255, 0.75) 22%, rgba(205, 216, 255, 0.2) 60%, transparent);
  --hl-light-v: linear-gradient(180deg, transparent, rgba(205, 216, 255, 0.75) 22%, rgba(205, 216, 255, 0.2) 60%, transparent);
  --hl-num: linear-gradient(180deg, #ffffff 0%, #dfe6ff 55%, #9fb2ff 100%);
  --hl-num-sm: linear-gradient(180deg, #ffffff 0%, #e4eaff 55%, #c3cfff 100%);
  /* the same values under the textmaker names, so recipes copied from
     tm-core.css keep working when their selectors are rewritten to .hl-site */
  --tm-rule: var(--hl-rule);
  --tm-ice: var(--hl-ice);
  --tm-eyebrow: var(--hl-eyebrow);
  --tm-lede: var(--hl-lede);
  --tm-body: var(--hl-body);
  --tm-soft: var(--hl-soft);
  --tm-bright: var(--hl-bright);
  --tm-stage: var(--hl-stage);
  --tm-light: var(--hl-light);
  --tm-light-v: var(--hl-light-v);
  --tm-num: var(--hl-num);
  --tm-num-sm: var(--hl-num-sm);
}

/* ============================================================
   2. PRIMITIVES
   ============================================================ */

/* section rhythm and the section head (the textmaker chapter header) */
.hl-site .hl-sec {
  padding-top: clamp(88px, 10vw, 144px);
  padding-bottom: clamp(88px, 10vw, 144px);
}
.hl-site .hl-head { margin-bottom: 48px; }
.hl-site .hl-head-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 20px 48px;
  align-items: start;
}
.hl-site .hl-head-grid > .hl-lede { align-self: end; }
.hl-site .hl-head h2, .hl-site .hl-head-grid h2 { margin: 0; }
.hl-site .hl-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--hl-lede);
  max-width: 52ch;
  margin: 0;
}
.hl-site .hl-lede a, .hl-site .hl-note a {
  color: var(--hl-bright);
  text-decoration: underline;
  text-decoration-color: rgba(205, 216, 255, 0.4);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.15s ease;
}
.hl-site .hl-lede a:hover, .hl-site .hl-note a:hover { text-decoration-color: var(--hl-ice); }

/* a band: top and bottom rules plus the one light along the top rule */
.hl-site .hl-band {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hl-site .hl-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--hl-light);
  pointer-events: none;
}
.hl-site .hl-band.hl-quiet::before { content: none; }

/* columns in a band, split by vertical hairlines inset 28px from the rules */
.hl-site .hl-cols {
  list-style: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.hl-site .hl-cols.hl-cols-lead { grid-template-columns: minmax(0, 1.7fr); }
.hl-site .hl-col { position: relative; min-width: 0; padding: 30px 26px 28px; }
.hl-site .hl-col:first-child { padding-left: 0; }
.hl-site .hl-col + .hl-col::after {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: var(--line);
  opacity: 1;
  transition: none;
  pointer-events: none;
}

/* light numeral: size with --hl-num-size (default 32px) or a size class */
.hl-site .hl-num {
  display: block;
  font: 600 var(--hl-num-size, 32px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: var(--hl-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hl-site .hl-num-lg { --hl-num-size: clamp(38px, 4.2vw, 58px); }
.hl-site .hl-num-xl { --hl-num-size: clamp(46px, 5.6vw, 80px); }
/* small numerals (under 24px) end lighter so they keep contrast */
.hl-site .hl-num-sm { --hl-num-size: 22px; background: var(--hl-num-sm); -webkit-background-clip: text; background-clip: text; }

/* tracked uppercase label */
.hl-site .hl-label {
  display: block;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-eyebrow);
  text-wrap: balance;
}
.hl-site .hl-num + .hl-label { margin-top: 14px; }

/* quiet supporting note */
.hl-site .hl-note {
  display: block;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hl-soft);
}
.hl-site .hl-label + .hl-note { margin-top: 8px; }

/* rows: a list split by inner rules; the band rules close it top and bottom.
   The open or active row turns bright and shows a 1px vertical light just
   outside the column (details[open], .is-active, aria-current, aria-selected). */
.hl-site .hl-rows { list-style: none; margin-left: 0; margin-right: 0; padding: 0; }
.hl-site .hl-rows > * {
  position: relative;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--hl-rule);
  color: var(--hl-body);
  transition: color 0.15s ease;
}
.hl-site .hl-rows > :first-child { border-top-color: var(--line); }
.hl-site .hl-rows > :last-child { border-bottom: 1px solid var(--line); }
.hl-site .hl-rows > .is-active, .hl-site .hl-rows > [aria-current="true"], .hl-site .hl-rows > [aria-current="page"],
.hl-site .hl-rows > [aria-selected="true"], .hl-site .hl-rows > details[open] { color: #fff; }
.hl-site .hl-rows > .is-active::before, .hl-site .hl-rows > [aria-current="true"]::before, .hl-site .hl-rows > [aria-current="page"]::before,
.hl-site .hl-rows > [aria-selected="true"]::before, .hl-site .hl-rows > details[open]::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--hl-light-v);
  pointer-events: none;
}

/* secondary action: text link with a hairline underline and an arrow */
.hl-site .hl-link {
  display: inline-block;
  padding: 12px 2px;
  font: 600 15px/1.3 "Inter", sans-serif;
  color: var(--hl-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(205, 216, 255, 0.4);
  transition: text-decoration-color 0.15s ease;
}
.hl-site .hl-link::after {
  content: "\2192";
  content: "\2192" / "";
  display: inline-block;
  margin-left: 10px;
  text-decoration: none;
  transition: translate 0.15s ease;
}
.hl-site .hl-link.hl-noarrow::after { content: none; }
.hl-site button.hl-link { appearance: none; margin: 0; border: 0; border-radius: 0; background: none; cursor: pointer; }
.hl-site .hl-link:hover { color: #fff; text-decoration-color: var(--hl-ice); }
.hl-site .hl-link:hover::after { translate: 3px 0; }

/* option controls: plain text buttons; the pressed one turns white with a
   1px bar under it */
.hl-site .hl-opts { display: flex; flex-wrap: wrap; gap: 2px 24px; list-style: none; margin: 0; padding: 0; }
.hl-site .hl-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: auto;
  min-height: 40px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--hl-soft);
  font: 600 14px/1.3 "Inter", sans-serif;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: color 0.15s ease;
}
.hl-site .hl-opt:hover { background: none; color: #fff; }
.hl-site .hl-opt[aria-pressed="true"], .hl-site .hl-opt[aria-selected="true"], .hl-site .hl-opt[aria-current="true"], .hl-site .hl-opt.is-active {
  background: none;
  color: #fff;
}
.hl-site .hl-opt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: rgba(205, 216, 255, 0.6);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.hl-site .hl-opt[aria-pressed="true"]::after, .hl-site .hl-opt[aria-selected="true"]::after,
.hl-site .hl-opt[aria-current="true"]::after, .hl-site .hl-opt.is-active::after { opacity: 1; }

/* media stage: black, 1px hairline border, radius 16px, no glow */
.hl-site .hl-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
  background: var(--hl-stage);
  border: 1px solid var(--line);
  border-radius: var(--hl-radius);
  box-shadow: none;
}
.hl-site .hl-frame.hl-square { aspect-ratio: 1 / 1; }
.hl-site .hl-frame > video, .hl-site .hl-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hl-site .hl-caption { display: block; margin-top: 16px; }
.hl-site .hl-caption + .hl-note { margin-top: 6px; }

/* form field: transparent, 1px hairline border, light bar under it on focus */
.hl-site .hl-field { position: relative; display: block; }
.hl-site .hl-field > .hl-label { margin-bottom: 10px; }
.hl-site .hl-field input, .hl-site .hl-field textarea, .hl-site .hl-field select, .hl-site input.hl-input {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--hl-bright);
  font: 400 15px/1.4 "Inter", sans-serif;
  outline: none;
  transition: border-color 0.15s ease;
}
.hl-site .hl-field input::placeholder, .hl-site .hl-field textarea::placeholder, .hl-site input.hl-input::placeholder { color: #8f9bc8; }
.hl-site .hl-field input:focus, .hl-site .hl-field textarea:focus, .hl-site .hl-field select:focus, .hl-site input.hl-input:focus { border-color: var(--hl-ice); }

.hl-site .hl-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- primitives on narrower screens ---------- */
@media (max-width: 1100px) {
  .hl-site .hl-col { padding: 26px 20px 24px; }
  .hl-site .hl-col:first-child { padding-left: 0; }
  .hl-site .hl-col + .hl-col::after { top: 24px; bottom: 22px; }
}
/* columns wrap to two per row; the divider at each wrap edge gives way to an
   inner rule between the rows. .hl-cols-stack goes straight to one column. */
@media (max-width: 820px) {
  .hl-site .hl-sec { padding-top: 72px; padding-bottom: 72px; }
  .hl-site .hl-head { margin-bottom: 32px; }
  .hl-site .hl-head-grid { grid-template-columns: 1fr; gap: 20px; }
  .hl-site .hl-lede { font-size: 17px; }
  .hl-site .hl-frame { border-radius: 14px; }
  .hl-site .hl-cols { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-site .hl-cols > .hl-col { padding: 22px 16px 20px; }
  .hl-site .hl-cols > .hl-col:nth-child(2n+1) { padding-left: 0; }
  .hl-site .hl-cols > .hl-col:nth-child(2n+1)::after { display: none; }
  .hl-site .hl-cols > .hl-col:nth-child(2n+2)::after { top: 22px; bottom: 20px; }
  .hl-site .hl-cols > .hl-col:nth-child(n+3) { border-top: 1px solid var(--hl-rule); }
  /* a lead column (.hl-cols-lead) takes the whole first row */
  .hl-site .hl-cols.hl-cols-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-site .hl-cols.hl-cols-lead > .hl-col:first-child { grid-column: 1 / -1; }
  .hl-site .hl-cols.hl-cols-lead > .hl-col:nth-child(2n) { padding-left: 0; }
  .hl-site .hl-cols.hl-cols-lead > .hl-col:nth-child(2n)::after { display: none; }
  .hl-site .hl-cols.hl-cols-lead > .hl-col:nth-child(2n+3) { padding-left: 16px; }
  .hl-site .hl-cols.hl-cols-lead > .hl-col:nth-child(2n+3)::after { display: block; top: 22px; bottom: 20px; }
  .hl-site .hl-cols.hl-cols-lead > .hl-col:nth-child(n+2) { border-top: 1px solid var(--hl-rule); }
  .hl-site .hl-cols.hl-cols-stack { grid-template-columns: minmax(0, 1fr); }
  .hl-site .hl-cols.hl-cols-stack > .hl-col { padding: 20px 0 18px; }
  .hl-site .hl-cols.hl-cols-stack > .hl-col::after { display: none; }
  .hl-site .hl-cols.hl-cols-stack > .hl-col + .hl-col { border-top: 1px solid var(--hl-rule); }
}
/* phones: one column unless the band asks to keep two (.hl-cols-keep2) */
@media (max-width: 480px) {
  .hl-site .hl-cols:not(.hl-cols-keep2) { grid-template-columns: minmax(0, 1fr); }
  .hl-site .hl-cols:not(.hl-cols-keep2) > .hl-col { padding: 20px 0 18px; }
  .hl-site .hl-cols:not(.hl-cols-keep2) > .hl-col::after { display: none; }
  .hl-site .hl-cols:not(.hl-cols-keep2) > .hl-col + .hl-col { border-top: 1px solid var(--hl-rule); }
  /* the 820px lead rules indent the third column and give it a divider; one column takes both back */
  .hl-site .hl-cols.hl-cols-lead:not(.hl-cols-keep2) > .hl-col:nth-child(n) { padding-left: 0; }
  .hl-site .hl-cols.hl-cols-lead:not(.hl-cols-keep2) > .hl-col:nth-child(n)::after { display: none; }
}

/* ---------- motion, contrast themes ---------- */
@media (prefers-reduced-motion: reduce) {
  .hl-site .hl-link, .hl-site .hl-link::after, .hl-site .hl-opt, .hl-site .hl-opt::after, .hl-site .hl-rows > * { transition: none; }
}
html[data-motion="off"] .hl-site .hl-link::after, html[data-motion="off"] .hl-site .hl-opt::after { transition: none; }
@media (forced-colors: active) {
  .hl-site .hl-opt[aria-pressed="true"]::after, .hl-site .hl-opt[aria-selected="true"]::after,
  .hl-site .hl-opt[aria-current="true"]::after, .hl-site .hl-opt.is-active::after {
    forced-color-adjust: none; background: CanvasText; opacity: 1; height: 2px;
  }
  .hl-site .hl-rows > .is-active::before, .hl-site .hl-rows > [aria-current="true"]::before, .hl-site .hl-rows > [aria-current="page"]::before,
  .hl-site .hl-rows > [aria-selected="true"]::before, .hl-site .hl-rows > details[open]::before,
  .hl-site .hl-band::before, .hl-site .cmdk-panel::before, .hl-site .cmdk-item.sel::before, .hl-site .rdot.on::before {
    forced-color-adjust: none; background: CanvasText;
  }
}

/* ============================================================
   3. SITE CHROME
   ============================================================ */

/* ---------- focus ---------- */
.hl-site :focus-visible { outline: 1px solid var(--hl-ice); outline-offset: 3px; }
/* keyboard focus and anchor jumps land below the sticky header (textmaker.html uses 92px) */
html:has(> body.hl-site) { scroll-padding-top: 110px; }

/* ---------- header: solid and still, one hairline border, no blur, glow or pill
   (the same block as the Hairline header on textmaker.html) ---------- */
.hl-site header nav {
  border-radius: 14px;
  background: var(--hl-solid);
  border: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.hl-site header nav a.link.active { background: rgba(205, 216, 255, 0.1); box-shadow: inset 0 0 0 1px var(--line); color: #fff; }
.hl-site header nav a.link:hover { background: rgba(205, 216, 255, 0.06); }
.hl-site header .navbuy, .hl-site header .navbuy:hover { box-shadow: none; }

/* ---------- tooltips (nav icons, app icons): solid, hairline, tracked ---------- */
.hl-site nav a.link.icon::after, .hl-site .aicon::after {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(4, 6, 20, 0.94);
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--hl-eyebrow);
  font: 600 11px/1.2 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* the icon name shows on keyboard focus too, not only on hover */
.hl-site nav a.link.icon:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ---------- type: eyebrows, section headings, ledes ---------- */
.hl-site .eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  color: var(--hl-eyebrow);
  margin-bottom: 16px;
  text-wrap: balance;
}
/* no glow under the display titles (their letter bounce and sheen stay) */
.hl-site h1 { filter: none; }
/* the letter bounce splits a plain h1 into .ltr inline blocks; Chrome does not
   paint the h1's text-clipped gradient into those animated boxes, so the
   letters came out fully transparent (products and search, before this layer).
   Each letter wears the same vertical gradient itself, which reads identically. */
.hl-site h1 .ltr {
  background-image: linear-gradient(180deg, #ffffff 30%, var(--ice) 75%, #93a5f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hl-site main section h2 {
  font-size: clamp(2.25rem, 1.1rem + 3.8vw, 3.75rem);
  font-weight: 650;
  font-variation-settings: "wght" 650;
  letter-spacing: -0.025em;
  line-height: 1.04;
  max-width: 20ch;
  text-wrap: balance;
  margin-bottom: 24px;
}
.hl-site main .sec-right h2 { margin-left: auto; }
/* the italic accent in a section heading: the same gradient with a lighter
   bottom stop, so the lower half of each glyph keeps its contrast */
.hl-site main section h2 .serif-accent { background-image: linear-gradient(0deg, rgba(150, 170, 255, 0.85) 0%, #dbe4ff 62%, #ffffff 100%); }
.hl-site main .sec-center h2, .hl-site main section[style*="text-align:center"] h2 { margin-left: auto; margin-right: auto; }
.hl-site .homesub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--hl-lede);
  max-width: 52ch;
}
.hl-site h2 + .homesub { margin-top: 0; }
@media (max-width: 820px) {
  .hl-site .homesub { font-size: 17px; }
}
/* page titles on phones: one size on every page (textmaker.html shows 44px,
   style.css drops a plain hero title to 29px); the home title keeps its own */
@media (max-width: 640px) {
  .hl-site .hero h1 { font-size: 40px; line-height: 1.1; }
}

/* ---------- buttons: the white pill stays, without its glow ---------- */
.hl-site .btn { box-shadow: inset 0 1px 0 #fff; }
.hl-site .btn:hover { box-shadow: inset 0 1px 0 #fff; transform: translateY(-1px); }
.hl-site .hero-cta { align-items: center; gap: 16px 32px; }
/* ghost buttons become hairline text links (the arrow comes from the label's
   own glyph; add .hl-link to the element instead for the drawn arrow) */
.hl-site .btn.ghost {
  overflow: visible;
  padding: 12px 2px;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: var(--hl-bright);
  font: 600 15px/1.3 "Inter", sans-serif;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(205, 216, 255, 0.4);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.hl-site .btn.ghost::after { content: none; }
.hl-site .btn.ghost:hover { transform: none; box-shadow: none; color: #fff; text-decoration-color: var(--hl-ice); }

/* ---------- pills: no chips; a pill reads as a tracked label, a link pill as a hairline link ---------- */
.hl-site .pill, .hl-site .pill.loud {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-eyebrow);
}
.hl-site a.pill {
  padding: 10px 0;
  color: var(--hl-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(205, 216, 255, 0.4);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.hl-site a.pill:hover { color: #fff; text-decoration-color: var(--hl-ice); }
.hl-site a.pill + a.pill { margin-left: 18px; }

/* ---------- generic glass surfaces become open hairline panels ---------- */
.hl-site .glass, .hl-site .card, .hl-site details {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
/* .glass (for example the search box): an outline, no fill */
.hl-site .glass { border: 1px solid var(--line); border-radius: var(--hl-radius); }
/* .card: open, a hairline on top, no box, no tilt, no spotlight or sheen */
.hl-site .card {
  padding: 26px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  transform: none !important;
  transition: none;
}
.hl-site .card:hover { transform: none; border-color: var(--line); box-shadow: none; }
.hl-site .card::before, .hl-site .card::after { content: none; }
.hl-site .card h3 { transform: none; will-change: auto; }
.hl-site .card p { font-size: 15px; line-height: 1.55; color: var(--hl-soft); }
/* details: question rows on hairlines, the open one lit */
.hl-site details {
  position: relative;
  margin: 0;
  padding: 20px 0;
  border: 0;
  border-top: 1px solid var(--hl-rule);
  border-radius: 0;
  /* rows read from the left edge, even inside a right-aligned section */
  text-align: left;
}
.hl-site details:first-of-type { border-top-color: var(--line); }
.hl-site details:last-of-type { border-bottom: 1px solid var(--line); }
.hl-site details[open]::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--hl-light-v);
  pointer-events: none;
}
.hl-site details > summary {
  position: relative;
  list-style: none;
  padding-right: 36px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--hl-body);
  transition: color 0.15s ease;
}
.hl-site details > summary::-webkit-details-marker { display: none; }
.hl-site details > summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  translate: 0 -50%;
  font: 300 22px/1 "Inter", sans-serif;
  color: var(--hl-soft);
  transition: rotate 0.15s ease;
}
.hl-site details > summary:hover, .hl-site details[open] > summary { color: #fff; }
.hl-site details[open] > summary::after { rotate: 45deg; }
.hl-site details > p { margin-top: 10px; max-width: 60ch; font-size: 15px; line-height: 1.55; color: var(--hl-soft); }
.hl-site details > p a { color: var(--hl-bright); text-decoration-color: rgba(205, 216, 255, 0.4); text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- footer: the same full-width rule and spacing as textmaker.html ---------- */
.hl-site footer { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 46px 0 60px; }
.hl-site footer .wrap { position: relative; padding-top: 0; gap: 14px 24px; }
.hl-site footer p { font-size: 14px; line-height: 1.5; color: var(--hl-body); }
.hl-site footer .links { gap: 8px 24px; }
.hl-site footer a {
  font: 600 14px/1.5 "Inter", sans-serif;
  color: var(--hl-body);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.hl-site footer a:hover { color: #fff; text-decoration-color: rgba(205, 216, 255, 0.4); }
@media (max-width: 640px) {
  /* the links start under the copyright on every page, with or without the email link */
  .hl-site footer .links { margin-left: 0; flex-basis: 100%; }
}

/* ---------- cosmic divider: a quiet hairline in the page column, no star ---------- */
.hl-site .cosmic-divider {
  height: 1px;
  max-width: min(1032px, calc(100% - 48px));
  margin: 0 auto;
  background: var(--line);
}
.hl-site .cosmic-divider::before { content: none; }
/* between sections the dividers are hidden, like textmaker.html: every band
   already closes on its own rule, so a divider read as a doubled line */
.hl-site main > .cosmic-divider { display: none; }

/* ---------- ornaments that clash with the Hairline look (hidden, markup kept) ---------- */
.hl-site .ghostword { display: none; }
.hl-site .hero::before { content: none; }
/* ornament glyphs (the star, trailing arrows) wrapped in the markup: kept, not shown */
.hl-site .hl-orn { display: none; }

/* ---------- command palette (Ctrl or Cmd + K) ---------- */
.hl-site .cmdk {
  background: rgba(2, 3, 12, 0.72);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hl-site .cmdk-panel {
  position: relative;
  overflow: visible;
  border-radius: var(--hl-radius);
  border: 1px solid var(--line);
  background: rgba(4, 6, 20, 0.96);
  box-shadow: none;
}
.hl-site .cmdk-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--hl-light);
  pointer-events: none;
}
.hl-site .cmdk-in {
  padding: 18px 20px;
  border-bottom: 1px solid var(--hl-rule);
  color: var(--hl-bright);
  font: 500 17px/1.3 "Inter", sans-serif;
}
.hl-site .cmdk-in:focus-visible { outline: none; }
.hl-site .cmdk-in::placeholder { color: #8f9bc8; }
.hl-site .cmdk-list { padding: 6px 20px; }
.hl-site .cmdk-item {
  position: relative;
  padding: 12px 0;
  border-radius: 0;
  border-top: 1px solid var(--hl-rule);
}
.hl-site .cmdk-item:first-child { border-top: 0; }
.hl-site .cmdk-item .ci-l { color: var(--hl-body); font: 600 15px/1.35 "Inter", sans-serif; transition: color 0.15s ease; }
.hl-site .cmdk-item .ci-h { color: var(--hl-eyebrow); font: 600 11px/1.3 "Inter", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.hl-site .cmdk-item .ci-h.ci-mail { font-weight: 500; font-size: 12.5px; letter-spacing: 0.01em; text-transform: none; }
.hl-site .cmdk-item.sel { background: none; }
.hl-site .cmdk-item.sel .ci-l { color: #fff; }
.hl-site .cmdk-item.sel::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--hl-light-v);
  pointer-events: none;
}
.hl-site .cmdk-none { color: var(--hl-soft); font-size: 14px; }
.hl-site .cmdk-foot {
  gap: 22px;
  padding: 12px 20px;
  border-top: 1px solid var(--hl-rule);
  color: var(--hl-soft);
  font: 500 12.5px/1.4 "Inter", sans-serif;
}
.hl-site .cmdk-foot b { color: var(--hl-bright); font-weight: 600; }
/* the palette key in the nav: the same quiet square textmaker.html shows */
.hl-site .link.pal { box-shadow: none; }

/* ---------- dot rail: short hairline ticks, the current one long and lit ---------- */
.hl-site .rail { right: 18px; gap: 0; }
.hl-site .rdot {
  position: relative;
  width: 28px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  scale: 1;
}
.hl-site .rdot::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: rgba(205, 216, 255, 0.6);
  transform-origin: 100% 50%;
  transition: background-color 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.hl-site .rdot:hover { background: none; }
.hl-site .rdot:hover::before { background: rgba(205, 216, 255, 0.9); }
.hl-site .rdot.on { background: none; box-shadow: none; scale: 1; }
.hl-site .rdot.on::before { background: linear-gradient(90deg, transparent, #cdd8ff 55%, #ffffff); transform: scaleX(2); }
.hl-site .rdot:focus-visible { outline-offset: 0; }

@media (prefers-reduced-motion: reduce) {
  .hl-site .rdot::before, .hl-site .btn.ghost, .hl-site a.pill, .hl-site footer a, .hl-site details > summary, .hl-site details > summary::after, .hl-site .cmdk-item .ci-l { transition: none; }
  .hl-site .cmdk-panel { animation: none; }
}
html[data-motion="off"] .hl-site .rdot::before, html[data-motion="off"] .hl-site .cmdk-panel { transition: none; animation: none; }