/* sightpane.com /about/, /privacy/ and /terms/, 2026-10-13.
   src/pages/sp-about.mjs and sp-legal.mjs draw them on the shared pieces
   (the dusk band head, home's section heads, the app windows of
   pages/app.css and the closing). Only what is new lives here, .spa- for
   About and .spl- for the two legal pages. One content grid, the section
   head's two columns (the rest and a 350px side column, 48px apart), so
   the principles' lines and the side text share one left edge. */

/* ---------- About ---------- */
/* the eyebrow carries the Sightpane mark in place of the dot */
.spa-eye::before { content: none; }
.spa-eye .spa-eye-mk { display: block; width: 16px; height: 16px; flex: none; color: #fff3f0; }

/* the facts run the full column, as on Wedge's About (the head caps its children at 700px) */
.spa-hero > .ab-tiles { max-width: none; }

/* why, two short paragraphs beside the project window */
.spa-why .ap-line + .ap-line { margin-top: 14px; }

/* the principles, numbered hairline rows on the head's grid */
.spa-prin { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.spa-prin li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 350px); align-items: baseline; column-gap: 0; padding: 28px 0; }
.spa-prin li > .rl { position: absolute; left: 0; right: 0; top: 0; background: var(--pd-edge); }
.spa-prin li:last-child { box-shadow: inset 0 -1px 0 var(--pd-edge); }
.spa-n { color: var(--pd-faint); font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.spa-prin h3 { margin: 0; padding-right: 48px; color: var(--pd-tx); font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: -.025em; }
.spa-prin p { margin: 0; color: var(--pd-mid); font-size: 16px; line-height: 1.55; }

/* who makes it, Wedge Studio on the dusk scene, one glass tile that links to the studio */
.spa-maker { position: relative; display: grid; place-items: center; min-height: clamp(280px, 26vw, 330px); padding: 48px 24px; border-radius: 24px; overflow: clip; background: #1b2228; box-shadow: inset 0 0 0 1px var(--pd-edge); }
/* the near hills come up under the tile, so the scene's foot is lit land, not a dark blur */
.spa-maker .ap-bg img:nth-child(3) { top: 34%; -webkit-mask-image: none; mask-image: none; object-position: 50% 0; }
.spa-studio { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; width: min(100%, 560px); padding: 20px 24px 20px 20px; border-radius: 20px; background: rgba(23, 23, 23, .72); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 60px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .2); color: #fff3f0; text-decoration: none; transition: background-color 200ms ease-out, box-shadow 200ms ease-out; }
.spa-studio:hover { background: rgba(30, 30, 30, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 60px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .2); }
.spa-studio-mk { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.spa-wmark { display: block; width: 32px; height: 32px; color: #fff3f0; }
.spa-studio-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spa-studio-tx b { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.spa-studio-tx span { color: rgba(255, 255, 255, .66); font-size: 14px; line-height: 1.4; }
.spa-studio-go { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .8); font-size: 14px; white-space: nowrap; }
.spa-studio-go span { display: inline-block; transition: translate 200ms ease-out; }
.spa-studio:hover .spa-studio-go span { translate: 2px -2px; }

@media (max-width: 900px) {
  .spa-prin li { grid-template-columns: 44px minmax(0, 1fr); row-gap: 8px; padding: 24px 0; }
  .spa-prin h3 { padding-right: 0; font-size: 18px; }
  .spa-prin p { grid-column: 2; font-size: 15px; }
}
@media (max-width: 600px) {
  .spa-hero .ab-tiles li { height: 52px; align-items: center; padding-block: 0; }
  .spa-maker { min-height: 0; padding: 72px 16px 120px; border-radius: 20px; }
  .spa-maker .ap-bg img:nth-child(3) { top: 46%; }
  .spa-studio { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: 16px; }
  .spa-studio-mk { width: 52px; height: 52px; border-radius: 14px; }
  .spa-wmark { width: 26px; height: 26px; }
  .spa-studio-tx b { font-size: 18px; }
  .spa-studio-go { grid-column: 1 / -1; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
}

/* ---------- Privacy and Terms ---------- */
.spl-head { padding-bottom: 0; }
.spl-date { margin: 20px 0 0; color: rgba(255, 255, 255, .62); font-size: 14px; }
.spl-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 48px; padding-top: clamp(64px, 7vw, 104px); }
.spl-toc { position: sticky; top: 96px; align-self: start; }
.spl-toc p { margin: 0 0 14px; color: var(--pd-dim); font-size: 13px; }
.spl-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.spl-toc a { display: block; padding: 5px 0; color: var(--pd-dim); font-size: 14px; line-height: 1.4; text-decoration: none; transition: color 150ms ease-out; }
.spl-toc a:hover { color: var(--pd-tx); }
.spl-sec { scroll-margin-top: 96px; outline: none; }
.spl-sec + .spl-sec { margin-top: 56px; }
.spl-sec h2 { margin: 0 0 16px; color: var(--pd-tx); font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.spl-sec p, .spl-sec li { color: var(--pd-mid); font-size: 16px; line-height: 1.7; }
.spl-sec p { margin: 0; }
.spl-sec p + p, .spl-sec ul + p, .spl-sec p + ul { margin-top: 14px; }
.spl-sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.spl-sec li { position: relative; padding-left: 20px; }
.spl-sec li::before { content: ''; position: absolute; left: 2px; top: .78em; width: 5px; height: 5px; border-radius: 50%; background: var(--pd-dim); }
.spl-sec a { color: var(--pd-tx); text-decoration: underline; text-decoration-color: var(--pd-edge-2); text-underline-offset: 3px; }
.spl-sec a:hover { text-decoration-color: currentColor; }
.spl-other { margin: 72px 0 0; padding-top: 28px; border-top: 1px solid var(--pd-edge); }
.spl-other .pd-more { justify-self: start; }
.art.spl { padding-bottom: clamp(96px, 10vw, 160px); }

@media (max-width: 900px) {
  .spl-body { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 56px; }
  .spl-toc { display: none; }
  .spl-sec + .spl-sec { margin-top: 44px; }
  .spl-sec h2 { font-size: 20px; }
  .spl-sec p, .spl-sec li { font-size: 15.5px; line-height: 1.65; }
}
@media (prefers-reduced-motion: reduce) {
  .spa-studio, .spa-studio-go span, .spl-toc a { transition: none; }
}