/* GayStash — the legal documents and the takedown form.
   These get read under pressure: by someone whose photo is on the site, by a
   rights holder, by a regulator. So they are set as documents — a measured
   column, real headings, anchors — not as app screens. */

.doc{max-width:760px;margin:0 auto;padding:6px 14px 46px}
.doc-lede{
  max-width:64ch;padding-bottom:6px;
  font-size:16px;font-weight:500;line-height:1.6;color:var(--text-2);
}
.doc-lede b{color:var(--text)}
.doc-meta{
  padding:14px 0 0;font-size:12.5px;font-weight:600;color:var(--text-3);
}
.doc-meta b{color:var(--text-2)}

/* ── contents ───────────────────────────────────────────────────
   A legal page is a reference, not a read-through. Numbered anchors mean
   someone can be pointed at a clause instead of "see our terms". */
.toc{
  margin-top:20px;padding:15px 16px;border-radius:var(--r-lg);background:var(--surface);
}
.toc p{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding-bottom:9px}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:c}
.toc li{counter-increment:c}
.toc a{
  display:flex;gap:10px;padding:6px 0;
  font-size:14px;font-weight:600;color:var(--text-2);
}
.toc a::before{content:counter(c) ".";flex:none;width:20px;color:var(--text-3);font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--accent)}

/* ── sections ───────────────────────────────────────────────────── */
.sect{padding-top:30px;scroll-margin-top:74px}
.sect h2{
  font-size:19px;line-height:1.3;letter-spacing:-.02em;
  padding-bottom:4px;
}
.sect h2 span{color:var(--text-3);font-weight:700;padding-right:9px;font-variant-numeric:tabular-nums}
.sect h3{font-size:15px;line-height:1.35;padding:16px 0 3px}
.sect p{
  max-width:66ch;padding-top:9px;
  font-size:14.5px;font-weight:500;line-height:1.65;color:var(--text-2);
}
.sect p b{color:var(--text);font-weight:700}
.sect a{color:var(--accent);font-weight:600}
.sect ul,.sect ol{margin:0;padding:10px 0 0 19px;max-width:66ch}
.sect li{
  font-size:14.5px;font-weight:500;line-height:1.65;color:var(--text-2);
  padding-bottom:5px;
}
.sect li b{color:var(--text);font-weight:700}

/* the one-line version, for the 99% who will not read the clause */
.short{
  margin-top:11px;padding:11px 0 0;border-top:1px solid var(--line);
  max-width:66ch;font-size:13.5px;font-weight:600;line-height:1.55;color:var(--text-3);
}
.short b{color:var(--text-2);font-weight:800;letter-spacing:.02em}

/* a fact worth pulling out of the prose: an address, an agent, a deadline */
.card-fact{
  margin-top:14px;padding:15px 16px;border-radius:var(--r-md);background:var(--surface);
  font-size:14px;font-weight:500;line-height:1.6;color:var(--text-2);max-width:66ch;
}
.card-fact b{color:var(--text);font-weight:700}
.card-fact code{
  font:600 13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);
}

/* ── the takedown form ──────────────────────────────────────────
   Most of these are a wall of statutory fields. The first question is what
   is actually wrong, because two of the four answers must not queue behind
   a copyright process. */
.tri{display:grid;gap:9px;padding-top:6px}
.tri label{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 15px;border-radius:var(--r-md);
  background:var(--surface);cursor:pointer;
  transition:background .14s var(--ease);
}
.tri label:hover{background:var(--surface-2)}
.tri input{
  appearance:none;width:18px;height:18px;flex:none;margin:2px 0 0;
  border:2px solid var(--line-2);border-radius:50%;
}
.tri input:checked{border-color:var(--accent);border-width:5.5px}
.tri strong{display:block;font-size:14.5px;font-weight:700}
.tri em{
  display:block;font-style:normal;padding-top:3px;
  font-size:13px;font-weight:500;line-height:1.5;color:var(--text-3);
}
.tri .fast{color:var(--warn)}

/* the sworn statements. Deliberately not pre-ticked and deliberately
   quoted verbatim — they are what makes the notice valid. */
.sworn{display:flex;gap:11px;align-items:flex-start;padding-top:16px;max-width:66ch}
.sworn input{
  appearance:none;width:19px;height:19px;flex:none;margin:2px 0 0;
  border:2px solid var(--line-2);border-radius:5px;cursor:pointer;
}
.sworn input:checked{background:var(--accent);border-color:var(--accent)}
.sworn input:checked::after{
  content:"";display:block;width:5px;height:9px;margin:1px 0 0 5px;
  border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg);
}
.sworn span{font-size:13.5px;font-weight:500;line-height:1.55;color:var(--text-2)}

.warn-f{
  margin-top:22px;padding-top:14px;border-top:1px solid var(--line);
  max-width:66ch;font-size:13px;font-weight:500;line-height:1.6;color:var(--text-3);
}
.warn-f b{color:var(--warn);font-weight:700}

/* ── the site footer ────────────────────────────────────────────
   There wasn't one. These pages have to be reachable from every page, on
   every screen size — that is part of what makes them work at all. */
.foot{
  margin-top:34px;padding:20px 14px calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
.foot nav{display:flex;flex-wrap:wrap;gap:7px 18px}
.foot a{font-size:13px;font-weight:600;color:var(--text-3)}
.foot a:hover{color:var(--text)}
.foot p{
  padding-top:12px;max-width:66ch;
  font-size:12px;font-weight:500;line-height:1.55;color:var(--text-3);
}
.foot p b{color:var(--text-2);font-weight:700}

@media (min-width:1000px){
  .doc{padding:6px 22px 56px}
  .foot{padding:22px 22px 30px}
}