/* ============================================================
   INTERACT — the policy pages (privacy.html, terms-of-use.html)

   Same legal copy as the FRND pages; a completely different register.
   FRND is a sticker system: pink grounds, hard 0-blur ledges, Gabarito
   Black, prohibitions in a pink-soft card. Interact is editorial: near-
   black ground, Instrument Serif, hairlines, one lilac accent, and NOT a
   single filled card. A prohibition here is a bordered block with a mono
   label, not a shout.

   Structure already in v2.css + pages-v2.css and reused as-is:
     the glass nav · .phd page header · .foot · the sound button ·
     [data-reveal] · the compact and reduced-motion blocks · --s
   This file holds only what the policy pages add.
   ============================================================ */

/* the mono stamp under the page header — the only thing the header gains */
.pstamp{
  display:inline-flex; align-items:center; gap:calc(10 * var(--s));
  margin:0;
  font-family:var(--mono); font-weight:500;
  font-size:calc(10 * var(--s));
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.pstamp::before{
  content:''; width:calc(5 * var(--s)); height:calc(5 * var(--s));
  border-radius:50%; background:var(--lilac);
}

/* ── CONTENTS ────────────────────────────────────────────────
   A legal document that runs 16 or 17 sections needs a way in. On the
   FRND pages that is a numbered grid of pills; here it is a plain
   index — mono numeral, hairline rule, nothing else. */
.pidx{ padding:calc(96 * var(--s)) calc(120 * var(--s)) 0; }
.pidx__label{
  margin:0 0 calc(30 * var(--s));
  font-family:var(--mono); font-weight:500;
  font-size:calc(10 * var(--s));
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.pidx__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr);
  column-gap:calc(60 * var(--s));
  border-top:1px solid var(--hairline);
}
.pidx__list--2{ grid-template-columns:repeat(2, 1fr); }
.pidx__list a{
  display:grid; grid-template-columns:calc(36 * var(--s)) 1fr;
  align-items:start; gap:0;
  padding:calc(15 * var(--s)) 0;
  border-bottom:1px solid var(--hairline);
  color:var(--ink);
  font-size:calc(15 * var(--s)); line-height:1.4; letter-spacing:-.01em;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.pidx__list a::before{
  content:attr(data-n);
  font-family:var(--mono); font-weight:500;
  font-size:calc(10 * var(--s)); letter-spacing:.12em;
  color:var(--muted);
  padding-top:calc(4 * var(--s));
  transition:color .3s var(--ease);
}
.pidx__list a:hover, .pidx__list a.is-here{ color:var(--lilac); border-color:#403A49; }
.pidx__list a:hover::before, .pidx__list a.is-here::before{ color:var(--lilac); }

/* ── THE BODY ────────────────────────────────────────────────
   V1's left rail, carried into the dark system: a 180 column holding
   only the numeral, and a 780 reading measure beside it. The numeral is
   the only thing in the margin, so the page reads as one column with a
   folio — not as a two-column layout. */
.pbody{ padding:calc(110 * var(--s)) calc(120 * var(--s)) 0; }
.psec{
  display:grid;
  grid-template-columns:calc(180 * var(--s)) minmax(0, calc(780 * var(--s)));
  padding:calc(58 * var(--s)) 0;
  border-top:1px solid var(--hairline);
}
.psec:first-child{ border-top:0; padding-top:0; }
.psec__n{
  margin:calc(10 * var(--s)) 0 0;
  font-family:var(--mono); font-weight:500;
  font-size:calc(11 * var(--s));
  letter-spacing:.14em; color:var(--muted);
}
.psec__c > *:first-child{ margin-top:0; }
.psec__c h2{
  margin:0 0 calc(26 * var(--s));
  font-family:var(--serif); font-weight:400;
  font-size:calc(40 * var(--s)); line-height:1.06; letter-spacing:-.03em;
  color:var(--ink);
  scroll-margin-top:calc(130 * var(--s));
}
/* the sub-heading is the site's signature: serif ITALIC in lilac */
.psec__c h3{
  margin:calc(38 * var(--s)) 0 calc(14 * var(--s));
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:calc(24 * var(--s)); line-height:1.2; letter-spacing:-.02em;
  color:var(--lilac);
}
.psec__c p{
  margin:0 0 calc(20 * var(--s));
  color:var(--body);
  font-size:calc(16 * var(--s)); line-height:1.72; letter-spacing:-.01em;
}
.psec__c p.lead{ color:var(--ink); }
.psec__c a{ color:var(--lilac); text-decoration:underline; text-underline-offset:.2em; }
.psec__c a:hover{ color:var(--ink); }

/* a list is a hairline stack, not bullets — the same device as the index */
.plist{ list-style:none; margin:0 0 calc(28 * var(--s)); padding:0; border-top:1px solid var(--hairline); }
.plist li{
  padding:calc(14 * var(--s)) 0 calc(14 * var(--s)) calc(26 * var(--s));
  border-bottom:1px solid var(--hairline);
  position:relative;
  color:var(--body); font-size:calc(15 * var(--s)); line-height:1.66; letter-spacing:-.01em;
}
.plist li::before{
  content:''; position:absolute; left:0; top:calc(25 * var(--s));
  width:calc(12 * var(--s)); height:1px; background:var(--lilac);
}

/* NOT PERMITTED. On the FRND pages this is a pink card with a ✕ per line.
   Here the restraint IS the register: a bordered block, a mono label, and
   the lilac rule moved to the left edge of the box instead of each line. */
.pban{
  margin:0 0 calc(28 * var(--s));
  padding:calc(26 * var(--s)) calc(30 * var(--s)) calc(8 * var(--s));
  border:1px solid var(--hairline);
  border-left:calc(2 * var(--s)) solid var(--lilac);
  background:#111110;
}
.pban::before{
  content:'// Not permitted'; display:block;
  margin-bottom:calc(18 * var(--s));
  font-family:var(--mono); font-weight:500;
  font-size:calc(10 * var(--s));
  letter-spacing:.14em; text-transform:uppercase; color:var(--lilac);
}
.pban ul{ list-style:none; margin:0; padding:0; }
.pban li{
  position:relative; padding:0 0 calc(16 * var(--s)) calc(24 * var(--s));
  color:var(--ink); font-size:calc(15 * var(--s)); line-height:1.6; letter-spacing:-.01em;
}
.pban li::before{
  content:''; position:absolute; left:0; top:calc(11 * var(--s));
  width:calc(10 * var(--s)); height:1px; background:#5A5560;
}

/* the callout — an address, a deadline, a warning */
.pnote{
  margin:0 0 calc(28 * var(--s));
  padding:calc(28 * var(--s)) calc(30 * var(--s));
  border:1px solid #3A3442;
  background:#121016;
}
/* ⚠ `p.pnote__k`, not `.pnote__k`. The label IS a <p>, so the sibling rule
   `.pnote p` (0,1,1) and `.psec__c p` (0,2,0) both out-specify a bare class
   — the label silently rendered at body size with body tracking. */
.pnote p.pnote__k{
  margin:0 0 calc(12 * var(--s));
  font-family:var(--mono); font-weight:500;
  font-size:calc(10 * var(--s)); line-height:1.5;
  letter-spacing:.14em; text-transform:uppercase; color:var(--lilac);
}
.pnote p{ margin:0; color:var(--ink); font-size:calc(17 * var(--s)); line-height:1.6; letter-spacing:-.01em; }
.pnote a{
  display:inline-block; margin-top:calc(16 * var(--s));
  font-family:var(--mono); font-weight:500; font-size:calc(13 * var(--s));
  color:var(--lilac) !important; overflow-wrap:anywhere;
}

/* ── tables ──────────────────────────────────────────────────
   Hairlines only. The FRND version fills the whole table ink and puts a
   pink bar on the head; here the head is a mono rule and the rows are
   separated by the same 1px the rest of the page uses. The table takes
   the full 1200 measure, so it breaks out of the 780 reading column. */
.ptable{
  margin:0 0 calc(32 * var(--s));
  width:calc(960 * var(--s)); max-width:none;
  margin-left:calc(-180 * var(--s));
}
.ptable table{ width:100%; border-collapse:collapse; }
.ptable th{
  padding:0 calc(24 * var(--s)) calc(14 * var(--s)) 0;
  text-align:left; vertical-align:bottom;
  border-bottom:1px solid var(--lilac);
  font-family:var(--mono); font-weight:500;
  font-size:calc(10 * var(--s));
  letter-spacing:.14em; text-transform:uppercase; color:var(--lilac);
}
.ptable td{
  padding:calc(22 * var(--s)) calc(24 * var(--s)) calc(22 * var(--s)) 0;
  vertical-align:top;
  border-bottom:1px solid var(--hairline);
  color:var(--body); font-size:calc(14.5 * var(--s)); line-height:1.7; letter-spacing:-.01em;
}
.ptable td:last-child, .ptable th:last-child{ padding-right:0; }
.ptable td:first-child{ color:var(--ink); width:calc(300 * var(--s)); }
.ptable--3 td:first-child{ width:calc(170 * var(--s)); }
.ptable td ul{ list-style:none; margin:0; padding:0; }
.ptable td li{ position:relative; padding:0 0 calc(9 * var(--s)) calc(20 * var(--s)); }
.ptable td li:last-child{ padding-bottom:0; }
.ptable td li::before{
  content:''; position:absolute; left:0; top:calc(13 * var(--s));
  width:calc(10 * var(--s)); height:1px; background:var(--lilac);
}

/* the closing note under a section that ends in a table */
.pfootnote{
  margin:calc(10 * var(--s)) 0 0;
  color:var(--muted); font-size:calc(14 * var(--s)); line-height:1.66;
}

/* the sibling policy, offered at the end rather than only in the footer */
.palso{ padding:calc(120 * var(--s)) calc(120 * var(--s)) 0; }
.palso__in{
  display:flex; align-items:center; justify-content:space-between; gap:calc(30 * var(--s));
  padding:calc(44 * var(--s)) 0;
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.palso__k{
  margin:0 0 calc(12 * var(--s));
  font-family:var(--mono); font-weight:500; font-size:calc(10 * var(--s));
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.palso__t{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:calc(38 * var(--s)); line-height:1.04; letter-spacing:-.03em; color:var(--ink);
}
.palso__t em{ font-style:italic; color:var(--lilac); }

/* ============================================================
   COMPACT  (≤1040 — --s is floored, so px from here)
   ============================================================ */
@media (max-width:1040px){
  .pstamp{ font-size:10px; gap:8px; }
  .pstamp::before{ width:5px; height:5px; }

  .pidx{ padding:52px 22px 0; }
  .pidx__label{ margin-bottom:18px; font-size:10px; }
  .pidx__list, .pidx__list--2{ grid-template-columns:1fr; }
  .pidx__list a{ grid-template-columns:32px 1fr; padding:13px 0; font-size:15px; }
  .pidx__list a::before{ font-size:10px; }

  .pbody{ padding:56px 22px 0; }
  .psec{ grid-template-columns:1fr; padding:34px 0; }
  .psec__n{ margin:0 0 12px; font-size:11px; }
  .psec__c h2{ font-size:28px; margin-bottom:18px; scroll-margin-top:88px; }
  .psec__c h3{ font-size:20px; margin:28px 0 10px; }
  .psec__c p{ font-size:15.5px; line-height:1.74; margin-bottom:16px; }
  .plist li{ padding:12px 0 12px 22px; font-size:15px; }
  .plist li::before{ top:22px; width:10px; }
  .pban{ padding:22px 20px 6px; }
  .pban li{ padding:0 0 14px 20px; font-size:14.5px; }
  .pnote{ padding:22px 20px; }
  .pnote p{ font-size:16px; }
  .pnote p.pnote__k{ font-size:10px; }
  /* 🔴 TAP TARGET — see the FRND file. 16px tall is far too small for the
     one link in the block people are meant to press. */
  .pnote a{ font-size:12.5px; margin-top:0; padding:12px 0; margin-bottom:-12px; }

  /* the table becomes one block per row, each cell introduced by the
     column it came from — a two-column legal table at 390px cannot be
     read any other way */
  .ptable{ width:auto; margin-left:0; }
  .ptable table, .ptable tbody, .ptable tr, .ptable td{ display:block; width:auto; }
  .ptable thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .ptable tr{ padding:22px 0; border-top:1px solid var(--hairline); }
  .ptable tr:first-child{ border-top:1px solid var(--lilac); }
  .ptable td{ padding:0; border:0; font-size:14.5px; }
  .ptable td:first-child{ width:auto; }
  .ptable td + td{ margin-top:16px; padding-top:16px; border-top:1px solid #1E1D1B; }
  .ptable td::before{
    content:attr(data-h); display:block; margin-bottom:7px;
    font-family:var(--mono); font-weight:500; font-size:9.5px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  }
  .ptable td:first-child::before{ color:var(--lilac); }
  .ptable td li{ padding:0 0 8px 18px; }
  .ptable td li::before{ top:12px; }

  .pfootnote{ font-size:13.5px; }

  .palso{ padding:64px 22px 0; }
  .palso__in{ flex-direction:column; align-items:flex-start; gap:20px; padding:30px 0; }
  .palso__t{ font-size:28px; }
}