/* ============================================================
   Weirdly Good — shared styling for the policy pages.
   Same dot-paper ground and green family as index.html, but the
   tokens live here instead of inline: five documents sharing one
   stylesheet beats five copies drifting out of sync.
   ============================================================ */

:root{
  /* Dot-paper ground — light green, 3mm pitch. Identical to index.html. */
  --bg:#eef4e6; --bg2:#e6eddc; --dot:#b9cba4;
  --dotgap:3mm; --dotsize:0.8px;
  --card:#f9fcf5; --line:#d7e2c8;
  --ink:#17251b; --mut:#5c6a5b;
  --deep:#14402c; --acc:#2d6a4f; --acc2:#3f8f68;
  --live:#40916c;
  --shadow:40,50,35;
  --r:16px;
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --body:'Work Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background-color:var(--bg);
  background-image:radial-gradient(circle,var(--dot) var(--dotsize),transparent calc(var(--dotsize) + 0.1px));
  background-size:var(--dotgap) var(--dotgap);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:780px;margin:0 auto;padding:0 20px}

/* ---- masthead ---- */
.top{padding:26px 0 0}
.back{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:500;color:var(--acc);
  text-decoration:none;padding:7px 13px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);
  transition:border-color .15s,color .15s;
}
.back:hover{border-color:var(--acc2);color:var(--deep)}

/* ---- the document sits on the dot paper like a cut sheet ---- */
main{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:44px 46px 40px;
  margin:22px 0 30px;
  box-shadow:0 1px 2px rgba(var(--shadow),.05),0 10px 30px rgba(var(--shadow),.06);
}

h1{
  font-family:var(--display);
  font-size:clamp(30px,5.2vw,42px);
  line-height:1.1;letter-spacing:-.02em;font-weight:700;
  background:linear-gradient(92deg,var(--deep),var(--acc) 48%,var(--acc2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:8px;
}

.updated{
  display:inline-block;font-size:13px;color:var(--mut);
  background:rgba(45,106,79,.10);border:1px solid rgba(45,106,79,.30);
  border-radius:999px;padding:4px 12px;margin-bottom:26px;
}

h2{
  font-family:var(--display);
  font-size:20px;font-weight:600;letter-spacing:-.01em;
  color:var(--deep);
  margin:32px 0 10px;
  padding-top:20px;border-top:1px solid var(--line);
}
h2:first-of-type{border-top:0;padding-top:0;margin-top:26px}

h3{font-family:var(--display);font-size:16.5px;font-weight:600;color:var(--acc);margin:20px 0 6px}

p{margin-bottom:13px}
ul,ol{margin:0 0 14px 22px}
li{margin-bottom:7px}
strong{color:var(--ink);font-weight:600}
a{color:var(--acc);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--deep)}

/* ---- callout: the one thing on the page a reader must not miss ---- */
.note{
  background:rgba(45,106,79,.07);
  border-left:3px solid var(--acc2);
  border-radius:0 10px 10px 0;
  padding:15px 18px;margin:18px 0 20px;
}
.note p:last-child{margin-bottom:0}

/* ---- unfilled placeholder. Deliberately loud so it cannot ship by
       accident — if you can see amber on the page, it is not ready. ---- */
.fill{
  background:#ffe9a8;color:#6b4c00;
  border:1px dashed #c79a1e;border-radius:5px;
  padding:1px 7px;font-size:.92em;font-weight:600;
  font-family:ui-monospace,'Cascadia Code',Consolas,monospace;
  white-space:nowrap;
}

table{border-collapse:collapse;width:100%;margin:6px 0 18px;font-size:15px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--display);font-weight:600;color:var(--deep);font-size:14px}
tbody tr:last-child td{border-bottom:0}

/* ---- cross-links between the policy documents ---- */
footer{
  border-top:1px solid var(--line);
  padding:24px 0 54px;
  font-size:14px;color:var(--mut);
}
.links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px}
.links a{color:var(--acc);text-decoration:none;font-weight:500}
.links a:hover{text-decoration:underline}

@media (max-width:560px){
  main{padding:30px 22px 28px;border-radius:12px}
  body{font-size:16px}
}