/* Privacy: a calm long-form page. Dark hero with one small signature (the headline resolves from square pixels),
   then a paper reading column at a ~68ch measure with a sticky section index on desktop. */

/* ---------- hero ---------- */
.pv-hero { position: relative; isolation: isolate; overflow: hidden; padding-top: calc(var(--hd) + clamp(72px, 14vh, 150px)); padding-bottom: clamp(56px, 10vh, 110px); }
.pv-plate { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--ink-0) 0%, oklch(0.135 0.006 358 / .9) 40%, oklch(0.135 0.006 358 / .55) 66%, oklch(0.135 0.006 358 / .2) 100%),
              linear-gradient(0deg, var(--ink-0) 0%, oklch(0.135 0.006 358 / 0) 40%),
              url("../../shared/plates/plate-04-2400.webp") 80% center / cover no-repeat; opacity: .9; }
.pv-hero-in { position: relative; }
.pv-hero .eyebrow::before { border-radius: 0; }
.pv-h-box { position: relative; width: max-content; max-width: 100%; }
.pv-h1 { font: 900 clamp(3.2rem, 8.4vw, 8.6rem)/.92 var(--f-display); letter-spacing: -0.04em; margin-left: -0.04em; text-wrap: balance; }
.pv-h-cv { position: absolute; left: 0; top: 0; pointer-events: none; display: none; }
.motion .pv-h-box.is-run .pv-h1 { color: transparent; }
.motion .pv-h-box.is-run .pv-h-cv { display: block; }
.pv-h-box.is-done .pv-h1 { transition: color .25s linear; }
.pv-intro { margin-top: clamp(22px, 3.4vh, 34px); max-width: 44ch; font: 500 var(--t-m)/1.4 var(--f-display); color: var(--fg); letter-spacing: -0.01em; }

.pv-updated { margin-top: clamp(18px, 2.6vh, 26px); font: 400 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }

/* ---------- reading ---------- */
.pv-read { padding-block: clamp(64px, 11vh, 128px); }
.pv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.pv-article { max-width: 68ch; }
.pv-h2 { font: 700 var(--t-xl)/1.04 var(--f-display); letter-spacing: -0.025em; text-wrap: balance; max-width: 20ch; padding-bottom: clamp(28px, 4vh, 44px); border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--hd) + 24px); }
.pv-h2 span { white-space: nowrap; }
.pv-sec { padding-block: clamp(28px, 4.4vh, 44px); border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--hd) + 8px); }
.pv-sec:last-child { border-bottom: 0; }
.pv-h3 { font: 700 var(--t-l)/1.15 var(--f-display); letter-spacing: -0.015em; margin-bottom: 14px; }
.pv-sec p { color: var(--fg-2); font-size: 1.0625rem; line-height: 1.7; }
.pv-sec p + p { margin-top: 14px; }
.pv-sec a { color: var(--fg); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pv-sec a:hover { color: var(--accent-deep); }

.pv-h4 { font: 700 1.1875rem/1.25 var(--f-display); letter-spacing: -0.01em; color: var(--fg); margin: 26px 0 10px; }
.pv-h3 + .pv-h4 { margin-top: 0; }
.pv-list { display: grid; gap: 8px; margin-top: 14px; padding-left: 0; list-style: none; }
.pv-list + p { margin-top: 14px; }
.pv-list li { position: relative; padding-left: 22px; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.6; }
.pv-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; background: var(--accent); }
.pv-list strong { color: var(--fg); font-weight: 600; }
.pv-sec .pv-list a { color: var(--fg); }
.pv-note { margin-top: 26px; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--rule); background: var(--ink-1); }
.pv-note .pv-h4 { margin-top: 0; }

/* index: plain list on phone, sticky rail on desktop */
.pv-index-k { font: 400 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
.pv-index ul { display: grid; gap: 0; }
.pv-index a { display: flex; align-items: center; gap: 12px; min-height: 40px; text-decoration: none; color: var(--fg-2); font: 500 .9375rem/1.3 var(--f-body); transition: color .3s var(--ease); }
.pv-index a::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--rule); transition: background-color .3s var(--ease), transform .4s var(--ease); }
.pv-index a:hover { color: var(--fg); }
.pv-index a.on { color: var(--fg); }
.pv-index a.on::before { background: var(--accent); transform: scale(1.3); }
@media (max-width: 1023px) {
  .pv-index { padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
  .pv-index ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); column-gap: 20px; }
}
@media (min-width: 1024px) {
  .pv-grid { grid-template-columns: minmax(200px, 260px) minmax(0, 68ch); gap: clamp(48px, 7vw, 120px); justify-content: start; }
  .pv-index { position: sticky; top: calc(var(--hd) + 32px); align-self: start; }
  .pv-index a { min-height: 36px; }
  .pv-index ul { padding-left: 0; }
}

/* ---------- way on ---------- */
.pv-end { padding-block: clamp(72px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.pv-end-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 48px; }
.pv-end-h { font: 700 var(--t-2xl)/1 var(--f-display); letter-spacing: -0.02em; max-width: 14ch; text-wrap: balance; }
.pv-end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.pv-end-actions .link { margin-top: 0; }

@media (max-width: 767px) {
  .pv-hero { padding-top: calc(var(--hd) + 56px); }
  .pv-plate { background: linear-gradient(0deg, var(--ink-0) 0%, oklch(0.135 0.006 358 / .7) 45%, oklch(0.135 0.006 358 / .35) 100%),
                         url("../../shared/plates/plate-04-1280.webp") 70% center / cover no-repeat; opacity: .75; }
  .pv-h1 { font-size: clamp(2.9rem, 14vw, 4rem); }
  .pv-intro { font-size: 1.1875rem; }
  .pv-h2 { font-size: 2rem; }
  .pv-h3 { font-size: 1.5rem; }
  .pv-sec p, .pv-list li { font-size: 1rem; }
  .pv-h4 { font-size: 1.125rem; }
  .pv-end-h { font-size: 2.4rem; }
}
.pv-note { scroll-margin-top: calc(var(--hd) + 8px); }