/* Hallmark · macrostructure: Long Document · tone: plain, institutional-calm · anchor hue: warm terracotta
 * theme: inherited "Study" cream (app.css tokens) · nav: minimal back-link · footer: Ft1 contact rule
 * enrichment: none — typography only · pre-emit critique: P5 H5 E4 S5 R5 V4
 *
 * Shared by /terms.html and /privacy.html. These are standalone static documents: they do NOT
 * load app.css, so the tokens they need are redeclared here rather than imported. Keep the values
 * in step with assets/app.css :root — the cream, the ink and the terracotta are the same brand.
 * Light-only on purpose: the app's default surface is cream, and a legal page is not the place
 * to inherit a theme the reader never chose. */

:root{
  --canvas:#f7f2e7; --surface:#fcf7ec; --raise:#f4eede;
  --ink:#1c1915; --muted:#6f6656; --faint:#837962;
  --rule:#e3d9c4; --hairline:#ece3d1;
  --accent:#c9431f; --accent-tint:#fdeadf;
  --amber:#c8871a; --amber-tint:#fbeeca;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --space-2:2px; --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px;
  --space-24:24px; --space-32:32px; --space-48:48px; --space-64:64px;

  --measure:34rem;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur:140ms;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}

body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  font-feature-settings:"kern" 1; -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--measure); margin:0 auto; padding:0 22px}

/* ---- skip link : keyboard users should not tab the whole masthead ---- */
.skip{position:absolute; left:-9999px; top:0; z-index:10;
  background:var(--ink); color:var(--canvas); padding:10px 16px; border-radius:0 0 8px 0;
  font-size:14px; font-weight:600; text-decoration:none}
.skip:focus{left:0}

/* ---- masthead ---- */
.masthead{border-bottom:1px solid var(--rule); background:var(--surface)}
.masthead .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-16); padding-top:var(--space-16); padding-bottom:var(--space-16)}
.wordmark{font-family:var(--serif); font-weight:700; font-size:19px; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; white-space:nowrap}
.wordmark em{font-style:normal; color:var(--accent)}
.back{font-size:14px; color:var(--muted); text-decoration:none; white-space:nowrap;
  transition:color var(--dur) var(--ease-out)}
.back:hover{color:var(--accent)}

/* ---- document head ---- */
.dochead{padding:var(--space-64) 0 var(--space-32)}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin:0 0 var(--space-16)}
h1{font-family:var(--serif); font-weight:600; font-size:clamp(34px,7vw,46px); line-height:1.1;
  letter-spacing:-.02em; margin:0 0 var(--space-16); overflow-wrap:anywhere; min-width:0}
.dates{font-size:14px; color:var(--muted); margin:0}
.dates b{font-weight:600; color:var(--ink)}

/* ---- the short version : a plain-language summary above the formal text ---- */
.summary{background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:2px 10px 10px 2px; padding:var(--space-24); margin:var(--space-32) 0}
.summary h2{font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin:0 0 var(--space-12)}
.summary ul{margin:0; padding-left:1.1em}
.summary li{margin:0 0 var(--space-8); font-size:16px; line-height:1.55}
.summary li:last-child{margin-bottom:0}

/* ---- flag : for text that must be replaced before this page is published ---- */
.flag{background:var(--amber-tint); border:1px solid var(--amber); color:#7a5512;
  border-radius:10px; padding:14px 16px; margin:var(--space-24) 0; font-size:15px; line-height:1.5}
.flag b{color:#5c3f0d}
.todo{background:var(--amber); color:#2b1d05; padding:1px 7px; border-radius:4px;
  font-family:var(--mono); font-size:.86em; font-weight:600; white-space:nowrap}

/* ---- contents ---- */
.toc{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:var(--space-24) 0; margin:var(--space-32) 0 var(--space-48)}
.toc h2{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); font-weight:500; margin:0 0 var(--space-16)}
.toc ol{margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:var(--space-8) var(--space-24)}
.toc li{counter-increment:toc; font-size:15px}
.toc a{color:var(--ink); text-decoration:none; display:inline-block; padding:2px 0;
  border-bottom:1px solid transparent; transition:border-color var(--dur) var(--ease-out)}
.toc a::before{content:counter(toc,decimal-leading-zero); font-family:var(--mono); font-size:11px;
  color:var(--faint); margin-right:9px; letter-spacing:.04em}
.toc a:hover{border-bottom-color:var(--accent)}
.toc ol{counter-reset:toc}

/* ---- body sections ---- */
main{padding-bottom:var(--space-64); counter-reset:sec}
section{margin:0 0 var(--space-48); scroll-margin-top:var(--space-24)}
section > .num{counter-increment:sec; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--faint); display:block; margin:0 0 var(--space-8)}
section > .num::before{content:counter(sec,decimal-leading-zero)}
h2{font-family:var(--serif); font-weight:600; font-size:clamp(23px,4.2vw,27px); line-height:1.22;
  letter-spacing:-.01em; margin:0 0 var(--space-12); overflow-wrap:anywhere; min-width:0}
h3{font-family:var(--sans); font-weight:650; font-size:16px; line-height:1.4;
  margin:var(--space-24) 0 var(--space-8)}
p{margin:0 0 var(--space-16)}
ul,ol{margin:0 0 var(--space-16); padding-left:1.25em}
li{margin:0 0 var(--space-8)}
li:last-child{margin-bottom:0}
strong,b{font-weight:650}
a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; text-decoration-color:var(--accent-tint);
  transition:text-decoration-color var(--dur) var(--ease-out)}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* ---- data table : what we hold, why, how long ----
   A two-column table does not fit the prose measure, so on wide screens the table breaks out
   past the text column rather than scrolling inside it. Below that it scrolls in its own box,
   which is why the wrapper keeps overflow-x even when the breakout is active. */
.tablewrap{overflow-x:auto; margin:0 0 var(--space-16);
  border:1px solid var(--rule); border-radius:10px; background:var(--surface)}
@media (min-width:840px){
  .tablewrap{width:calc(100% + 176px); margin-left:-88px}
}
table{border-collapse:collapse; width:100%; min-width:30rem; font-size:15px}
th,td{text-align:left; vertical-align:top; padding:11px 14px; border-bottom:1px solid var(--hairline)}
thead th{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); font-weight:500; background:var(--raise); white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody th{font-weight:600; width:34%}

/* ---- footer ---- */
.docfoot{border-top:1px solid var(--rule); background:var(--surface);
  padding:var(--space-32) 0; font-size:15px; color:var(--muted)}
.docfoot p{margin:0 0 var(--space-8)}
.docfoot p:last-child{margin-bottom:0}
.docfoot .sib{margin-top:var(--space-16); font-size:14px}

/* ---- print : people print legal documents, and the default output is unreadable ---- */
@media print{
  body{background:#fff; font-size:11pt}
  .masthead,.docfoot,.toc,.skip,.flag{display:none}
  .wrap{max-width:none; padding:0}
  a{color:inherit; text-decoration:none}
  a[href^="http"]::after,a[href^="mailto"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#555}
  section{page-break-inside:avoid}
  h1,h2{page-break-after:avoid}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

@media (max-width:560px){
  body{font-size:16px}
  .dochead{padding-top:var(--space-48)}
  .summary{padding:var(--space-16)}

  /* Two columns will not fit a phone, and sideways-scrolling a retention table is a bad way to
     read one. Stack each row instead: the row header sits above its value. The column headers
     are then redundant visually, so they are hidden from sight but left for screen readers. */
  .tablewrap{overflow-x:visible}
  table{min-width:0}
  thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  tbody tr{display:block; border-bottom:1px solid var(--rule); padding:6px 0}
  tbody tr:last-child{border-bottom:0}
  tbody th,tbody td{display:block; width:auto; border-bottom:0}
  tbody th{padding-bottom:1px}
  tbody td{padding-top:0; color:var(--muted)}
}