/*
 * Long-read pages under /research: the legal pages' paper look (privacy, support), with a
 * reading column of about 70 characters, a contents list beside it on wide screens, styled
 * tables, and print rules so the browser's "Save as PDF" gives a clean paper.
 */
:root{
  --paper:#FBF9F5; --paper-raised:#FFFFFF;
  --ink:#1D1A17; --ink-soft:#544E47; --ink-quiet:#6F675D; --doc-ink:#2a2621;
  --wunel:#7B2D3A; --wunel-dark:#6c2733; --clay:#B08046;
  --hair:#E7E1D7; --hair-strong:#DAD2C5; --agent-wash:#FBF6EE;
  --serif:'Iowan Old Style','Palatino Linotype','Book Antiqua',Georgia,Cambria,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:16px}
body{margin:0; background:var(--paper); color:var(--doc-ink); font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
::selection{background:rgba(176,128,70,.3)}
a{color:var(--wunel); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--wunel-dark)}
:focus-visible{outline:2px solid var(--wunel); outline-offset:3px; border-radius:4px}

.topbar{height:52px; background:var(--paper); border-bottom:1px solid var(--hair)}
.topbar-in{max-width:1160px; height:100%; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between}
.brand{font-family:var(--serif); font-weight:600; font-size:21px; letter-spacing:.2px; color:var(--wunel); line-height:1; text-decoration:none}
.brand::after{content:"."; color:var(--clay)}
.topnav{display:flex; gap:20px; font-size:14px}
.topnav a{color:var(--ink-soft); text-decoration:none}
.topnav a:hover{color:var(--ink); text-decoration:underline}

/* contents beside the column on wide screens, above it on narrow ones */
.layout{max-width:1160px; margin:0 auto; padding:48px 24px 64px; display:grid; grid-template-columns:240px minmax(0,1fr);
  column-gap:56px; align-items:start}
.toc{min-width:0; position:sticky; top:24px; max-height:calc(100vh - 48px); overflow:auto; font-size:13.5px; line-height:1.4}
.toc summary{cursor:default; list-style:none; margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-quiet)}
.toc summary::-webkit-details-marker{display:none}
.toc ol{margin:0; padding:0; list-style:none; border-left:1px solid var(--hair)}
.toc li{margin:0}
.toc a{display:block; padding:5px 0 5px 14px; margin-left:-1px; border-left:2px solid transparent; color:var(--ink-soft); text-decoration:none}
.toc a:hover{color:var(--ink); border-left-color:var(--hair-strong)}
.toc a[aria-current="true"]{color:var(--wunel); border-left-color:var(--wunel)}

article{min-width:0; max-width:70ch; font-family:var(--serif); font-size:18.5px; line-height:1.65; color:var(--doc-ink)}
.paper-head{margin:0 0 36px; padding-bottom:28px; border-bottom:1px solid var(--hair)}
.kicker{margin:0 0 10px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--clay)}
h1{margin:0 0 12px; font-family:var(--serif); font-weight:600; font-size:44px; line-height:1.1; letter-spacing:-.012em; color:var(--ink); text-wrap:balance}
.subtitle{margin:0 0 18px; font-size:22px; line-height:1.4; font-style:italic; color:var(--ink-soft); text-wrap:balance}
.byline{margin:0; font-family:var(--sans); font-size:14px; color:var(--ink-quiet)}
.byline span:first-child{color:var(--ink); font-weight:600}
h2{margin:56px 0 14px; font-weight:600; font-size:28px; line-height:1.22; letter-spacing:-.005em; color:var(--ink); text-wrap:balance}
h3{margin:34px 0 10px; font-weight:600; font-size:21px; line-height:1.3; color:var(--ink)}
p{margin:0 0 18px}
ul, ol{margin:0 0 18px; padding-left:26px}
li{margin:0 0 10px}
li::marker{color:var(--clay)}
strong{color:var(--ink); font-weight:650}
code{font-family:var(--mono); font-size:.8em; background:var(--agent-wash); border:1px solid var(--hair); border-radius:4px; padding:1px 5px}
a.cite{font-family:var(--sans); font-size:.72em; vertical-align:.35em; line-height:0; text-decoration:none; padding:0 1px}
a.cite:hover{text-decoration:underline}
blockquote{margin:0 0 18px; padding:12px 18px; border-left:3px solid var(--hair-strong); background:var(--paper-raised);
  border-radius:0 8px 8px 0; font-family:var(--mono); font-size:14px; line-height:1.55; color:var(--ink-soft)}
blockquote p{margin:0}
.thesis{margin:0 0 36px; padding:20px 24px; background:var(--agent-wash); border-left:3px solid var(--clay); border-radius:0 12px 12px 0;
  font-size:19.5px; line-height:1.6; color:var(--ink)}
.thesis p{margin:0}

/* tables: figures with a number, sans and tabular figures, scroll sideways on a phone */
figure.tbl{margin:8px 0 26px; font-family:var(--sans)}
figure.tbl figcaption{margin:0 0 6px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-quiet)}
.table-wrap{overflow-x:auto; border:1px solid var(--hair); border-radius:10px; background:var(--paper-raised)}
table{width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.4; font-variant-numeric:tabular-nums}
th, td{text-align:left; vertical-align:top; padding:8px 12px; border-bottom:1px solid var(--hair)}
th{font-size:12px; font-weight:600; color:var(--ink-quiet); background:var(--paper); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td code{font-size:.9em}

.refs{font-family:var(--sans); font-size:14px; line-height:1.5; padding-left:30px}
.refs li{margin:0 0 8px; overflow-wrap:anywhere; scroll-margin-top:16px}
.refs li:target{background:var(--agent-wash); outline:2px solid var(--agent-wash); border-radius:4px}
.end-note{margin-top:48px; padding-top:20px; border-top:1px solid var(--hair); font-family:var(--sans); font-size:15px; color:var(--ink-soft)}

footer{border-top:1px solid var(--hair)}
.foot-in{max-width:1160px; margin:0 auto; padding:18px 24px 28px; display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:13px; color:var(--ink-quiet)}
footer nav{display:flex; flex-wrap:wrap; gap:8px 20px}
footer a{color:var(--ink-soft); text-decoration:none}
footer a:hover{color:var(--ink); text-decoration:underline}

@media (max-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr); padding-top:32px}
  article{margin:0 auto; width:100%}
  .toc{position:static; max-height:none; overflow:visible; max-width:70ch; width:100%; margin:0 auto 28px; padding:14px 18px;
    background:var(--paper-raised); border:1px solid var(--hair); border-radius:12px; font-size:15px}
  .toc summary{cursor:pointer; margin:0}
  .toc summary::after{content:" +"; color:var(--ink-quiet)}
  .toc details[open] summary{margin-bottom:10px}
  .toc details[open] summary::after{content:" \2212"}
  .toc ol{border-left:0}
  .toc a{padding:6px 0; border-left:0; margin:0}
  .toc li + li{border-top:1px solid var(--hair)}
}
@media (max-width:640px){
  .topbar-in, .layout, .foot-in{padding-left:16px; padding-right:16px}
  article{font-size:17px}
  h1{font-size:32px}
  .subtitle{font-size:19px}
  h2{font-size:23px; margin-top:44px}
  h3{font-size:19px}
  .thesis{font-size:17.5px; padding:16px 18px}
  .foot-in{flex-direction:column; align-items:flex-start}
}

/* "Save as PDF": the paper only, black on white, links spelled out in the references */
@page{margin:18mm 16mm}
@media print{
  body{background:#fff; color:#000; font-size:11pt}
  .topbar, .toc, footer, .end-note, .consent-banner{display:none !important}
  .layout{display:block; padding:0; max-width:none}
  article{max-width:none; font-size:11pt; line-height:1.5; color:#000}
  h1{font-size:24pt} .subtitle{font-size:14pt} h2{font-size:16pt; margin-top:22pt} h3{font-size:12.5pt}
  h2, h3{break-after:avoid; page-break-after:avoid}
  p, li{orphans:3; widows:3}
  figure.tbl, .thesis, blockquote{break-inside:avoid; page-break-inside:avoid}
  .table-wrap{overflow:visible; border-color:#bbb}
  th, td{border-color:#ccc}
  table{font-size:8.5pt}
  .thesis{background:none; border-left-color:#999; font-size:12pt}
  a{color:#000; text-decoration:none}
  a.cite{color:#000}
  .refs{font-size:9pt}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important} }
