/* ==========================================================================
   KJPTV — Legals furniture (.pol-*)
   Linked by Terms of Service.html and Privacy Policy.html. One layout, two
   documents: the policy on the left, a sticky clickable contents on the right.
   Nothing here is page-specific, so a third legal page reuses the whole sheet.
   ========================================================================== */

/* No overflow clipping here: it would kill the sticky contents column.
   --polbar is the height the pinned mobile contents bar takes off the top. */
.pol { --polbar: 0px; position: relative; padding: calc(var(--nav-height) + 54px + var(--polbar)) 0 96px; }
.pol-pattern {
  position: absolute; inset: 0; z-index: 0; opacity: 0.05; pointer-events: none;
  background: url('assets/brand-pattern.png?v=59e9ff10') center / 320px repeat;
}
.pol-wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(90% 60% at 82% -8%, rgba(214, 157, 56, 0.13) 0%, rgba(6,6,6,0) 60%),
    radial-gradient(120% 90% at 8% 0%, rgba(6,6,6,0.5) 0%, rgba(6,6,6,0.92) 56%, #060606 100%);
}
.pol .container { position: relative; z-index: 2; }

/* ---- Document head -------------------------------------------------------- */
.pol-head { max-width: 780px; margin-bottom: 52px; }
.pol-head h1 {
  font-size: clamp(calc(var(--size-display) * 0.6), 5.2vw, var(--size-display)); font-weight: 900; line-height: 1.02; letter-spacing: -0.035em;
}
.pol-lede { margin: 18px 0 0; max-width: 52ch; font-size: calc(var(--size-subhead) * 0.9444); line-height: 1.62; color: var(--text-body); }

.pol-meta { display: flex; flex-wrap: wrap; row-gap: 8px; margin-top: 26px; font-size: calc(var(--size-small) * 1.0417); color: var(--text-muted); }
.pol-meta span { display: inline-flex; align-items: center; }
.pol-meta span::after { content: "\00b7"; margin: 0 12px; color: var(--gold-honey); opacity: 0.55; }
.pol-meta span:last-child::after { content: none; }
.pol-meta b { color: var(--text-heading); font-weight: 700; margin-left: 6px; }

/* Placeholder the client still has to fill in */
.pol-todo {
  display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px;
  font-size: var(--size-meta); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-mustard); border: 1px dashed var(--border-gold); background: rgba(214,157,56,0.05);
}
.pol-meta .pol-todo { margin-left: 6px; }
.pol-todo.is-long {
  display: block; margin-top: 10px; padding: 12px 16px; border-radius: 12px;
  font-size: calc(var(--size-small) * 1.0417); font-weight: 600; letter-spacing: 0.02em; text-transform: none; line-height: 1.6;
}

/* Terms / Privacy switch */
.pol-switch {
  display: inline-flex; gap: 4px; margin-top: 30px; padding: 4px; border-radius: 999px;
  background: var(--color-surface-2); border: 1px solid var(--border-bevel); box-shadow: var(--well-inset);
}
.pol-switch a {
  padding: 9px 20px; border-radius: 999px; font-size: calc(var(--size-small) * 1.0833); font-weight: 700; color: var(--text-body);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.pol-switch a:hover { color: var(--gold-mustard); }
.pol-switch a.is-on,
.pol-switch a.is-on:hover { color: #2a1e08; background: var(--gold-metallic-135); box-shadow: var(--bevel-highlight); }

/* ---- Document / contents split -------------------------------------------- */
/* The contents column runs the full height of the document so its card has
   somewhere to travel; the card itself is what sticks. */
.pol-grid { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 64px; }
.pol-body { min-width: 0; }

.pol-intro p { font-size: calc(var(--size-body) * 1.1071); line-height: 1.78; color: var(--text-body); max-width: 74ch; }
/* Anything following anything in the intro gets air, not just p after p —
   the read-this callout sits in this block too. */
.pol-intro > * + * { margin-top: 16px; }

.pol-sec { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--border-bevel); scroll-margin-top: calc(var(--nav-height) + var(--polbar) + 28px); }
.pol-sec h2 {
  display: flex; align-items: baseline; gap: 14px;
  font-size: clamp(calc(var(--size-heading) * 0.6563), 2.3vw, calc(var(--size-heading) * 0.8125)); font-weight: 800; letter-spacing: -0.03em; line-height: 1.18;
}
.pol-num { flex: none; font-size: var(--size-small); font-weight: 800; letter-spacing: 0.08em; color: var(--gold-honey); font-variant-numeric: tabular-nums; }

.pol-sec p { margin-top: 18px; font-size: calc(var(--size-body) * 1.1071); line-height: 1.78; color: var(--text-body); max-width: 74ch; }
.pol-sec strong { color: var(--text-heading); font-weight: 700; }
.pol-sec a, .pol-intro a { font-weight: 600; }

.pol-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; max-width: 74ch; }
.pol-list li { position: relative; padding-left: 26px; font-size: calc(var(--size-body) * 1.0714); line-height: 1.7; color: var(--text-body); }
.pol-list li::before {
  content: ""; position: absolute; left: 6px; top: 11px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--gold-honey);
}

/* The one line in a section that has to be read before the rest */
.pol-flag {
  margin-top: 22px; padding: 20px 24px; border-radius: var(--radius-card);
  background: var(--color-surface-1); border: 1px solid var(--border-gold);
  box-shadow: var(--bevel-highlight), var(--gold-glow);
}
.pol-flag-t {
  display: block; margin-bottom: 8px;
  font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-mustard);
}
.pol-flag p { margin: 0; max-width: none; font-size: calc(var(--size-body) * 1.0714); line-height: 1.68; color: var(--text-heading); font-weight: 500; }
.pol-flag p strong { font-weight: 700; }

/* Set-in-capitals clauses, given room to breathe */
.pol-caps {
  margin-top: 20px; padding: 20px 24px; border-radius: 14px; max-width: none;
  background: rgba(255,255,255,0.015); border: 1px solid var(--border-bevel); box-shadow: var(--bevel-highlight);
  font-size: calc(var(--size-small) * 1.0833); line-height: 1.95; letter-spacing: 0.045em; color: var(--text-body);
}
.pol-sec .pol-caps strong { color: var(--text-body); font-weight: 700; }

.pol-tw {
  margin-top: 24px; overflow-x: auto; border-radius: var(--radius-card);
  background: var(--color-surface-1); border: 1px solid var(--border-bevel); box-shadow: var(--bevel-highlight);
}
.pol-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.pol-table th {
  padding: 14px 18px; text-align: left; white-space: nowrap;
  font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  background: rgba(255,255,255,0.015); border-bottom: 1px solid var(--border-bevel-strong);
}
.pol-table td {
  padding: 15px 18px; vertical-align: top; font-size: calc(var(--size-body) * 0.9643); line-height: 1.6;
  color: var(--text-body); border-bottom: 1px solid var(--border-bevel);
}
.pol-table tbody tr:last-child td { border-bottom: 0; }
.pol-table td:first-child { color: var(--text-heading); font-weight: 700; }
.pol-swipe { margin-top: 10px; font-size: calc(var(--size-meta) * 1.0455); color: var(--text-muted); display: none; }

/* Summary section reads as one card, not fifteen loose lines */
.pol-sec.is-summary .pol-list {
  max-width: none; padding: 24px 26px; border-radius: var(--radius-card);
  background: var(--color-surface-1); border: 1px solid var(--border-bevel); box-shadow: var(--bevel-highlight);
}

/* ---- Opt out of targeted advertising -------------------------------------- */
.pol-dns {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 26px;
  margin-top: 26px; padding: 26px 28px; border-radius: 18px; scroll-margin-top: calc(var(--nav-height) + var(--polbar) + 28px);
  background: var(--color-surface-1); border: 1px solid var(--border-gold);
  box-shadow: var(--bevel-highlight), var(--shadow-matte), var(--gold-glow);
}
.pol-dns .kicker { margin-bottom: 10px; }
.pol-dns h3 { font-size: calc(var(--size-subhead) * 1.0556); font-weight: 800; letter-spacing: -0.025em; line-height: 1.25; }
.pol-dns p { margin-top: 12px; max-width: 56ch; font-size: var(--size-body); line-height: 1.65; color: var(--text-body); }
.pol-dns-note { font-size: calc(var(--size-small) * 1.0417); font-weight: 700; color: var(--gold-mustard); }

/* ---- Foot of the document -------------------------------------------------- */
.pol-end { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.pol-card {
  display: block; padding: 24px 26px; border-radius: calc(var(--radius-card) * 1.125);
  background: var(--color-surface-1); border: 1px solid var(--border-bevel);
  box-shadow: var(--bevel-highlight);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
a.pol-card:hover { border-color: var(--border-gold); transform: translateY(-2px); }
.pol-card-k {
  display: block; margin-bottom: 10px;
  font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
.pol-card h3 { font-size: calc(var(--size-subhead) * 0.9444); font-weight: 800; letter-spacing: -0.02em; }
.pol-card p { margin-top: 8px; font-size: calc(var(--size-body) * 0.9643); line-height: 1.6; color: var(--text-body); }
.pol-card .text-link { margin-top: 14px; color: var(--gold-mustard); }
.pol-top { display: flex; justify-content: center; margin-top: 30px; }
.pol-top a { font-size: calc(var(--size-small) * 1.0833); font-weight: 700; color: var(--text-muted); }
.pol-top a:hover { color: var(--gold-mustard); }

/* The document you are on reads gold in the footer legal line */
.page-terms .footer-legal a[href="Terms%20of%20Service.html"],
.page-privacy .footer-legal a[href="Privacy%20Policy.html"] { color: var(--gold-mustard); font-weight: 700; }

/* ---- Contents ------------------------------------------------------------- */
.pol-toc-in {
  position: sticky; top: calc(var(--nav-height) + 24px);
  padding: 20px 18px; border-radius: 18px;
  background: var(--color-surface-1); border: 1px solid var(--border-bevel);
  box-shadow: var(--bevel-highlight), var(--shadow-matte);
}
.pol-toc-t {
  display: block; margin-bottom: 14px;
  font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
.pol-toc-btn { display: none; }
.pol-prog { height: 3px; margin-bottom: 16px; border-radius: 999px; background: var(--color-surface-3); box-shadow: var(--well-inset); overflow: hidden; }
.pol-prog i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--gold-bar); }
.pol-toc-list {
  display: grid; gap: 2px; margin: 0 -6px; padding: 0 6px;
  max-height: min(58vh, 620px); overflow-y: auto; overscroll-behavior: contain;
}
.pol-toc-list a {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: baseline;
  padding: 7px 10px; border-radius: 9px; font-size: calc(var(--size-small) * 1.0833); line-height: 1.4; font-weight: 600; color: var(--text-body);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pol-toc-list a em { font-style: normal; font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pol-toc-list a:hover { color: var(--text-heading); background: rgba(255,255,255,0.03); }
.pol-toc-list a.is-on { color: var(--gold-mustard); background: rgba(214,157,56,0.10); }
.pol-toc-list a.is-on em { color: var(--gold-honey); }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .pol-grid { grid-template-columns: minmax(0, 1fr) 250px; gap: 44px; }
}
@media (max-width: 980px) {
  .pol { --polbar: 47px; }
  .pol-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* Contents is a second bar, fixed under the navbar, so a section is always
     one tap away. Fixed rather than sticky: a grid item can only travel inside
     its own row, so sticky would barely move. The list drops over the document. */
  .pol-toc { position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 90; }
  .pol-toc-in {
    position: relative; top: auto; display: flex; align-items: center; height: var(--polbar);
    margin: 0; padding: 0 var(--gutter); border-radius: 0; border-left: 0; border-right: 0;
    border-top: 1px solid var(--border-bevel); border-bottom: 1px solid var(--border-bevel);
    background: rgba(9,9,9,0.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 26px -18px rgba(0,0,0,0.95);
  }
  .pol-toc-t, .pol-prog { display: none; }
  .pol-toc-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 0;
    font: inherit; text-align: left; color: var(--text-heading);
  }
  .pol-toc-btn svg { width: 17px; height: 17px; flex: none; color: var(--gold-mustard); transition: transform var(--dur-base) var(--ease-out); }
  .pol-toc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .pol-toc-now {
    display: flex; align-items: baseline; min-width: 0;
    font-size: calc(var(--size-meta) * 1.0455); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  }
  .pol-toc-now b {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: calc(var(--size-body) * 0.9643); font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--text-heading);
  }
  .pol-toc-now b::before { content: "\00b7"; margin: 0 9px; color: var(--gold-honey); font-weight: 800; }
  .pol-toc-list {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    margin: 0; padding: 10px var(--gutter) 16px; max-height: 62vh;
    background: rgba(8,8,8,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-bevel); box-shadow: var(--shadow-matte-lg);
  }
  .pol-toc.is-open .pol-toc-list { display: grid; }
  .pol-head { margin-bottom: 40px; }
  .pol-end { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .pol { padding: calc(var(--nav-height) + 30px + var(--polbar)) 0 72px; }
  .pol-lede { font-size: calc(var(--size-body) * 1.1071); }
  .pol-sec { margin-top: 32px; padding-top: 32px; }
  .pol-sec p, .pol-intro p { font-size: calc(var(--size-body) * 1.0714); }
  .pol-sec h2 { gap: 10px; }
  .pol-caps, .pol-flag { padding: 18px; }
  .pol-swipe { display: block; }
  .pol-dns { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px; }
  .pol-switch { width: 100%; }
  .pol-switch a { flex: 1; text-align: center; padding: 10px 12px; }
}