/* zaruri.com — styles from the Zaruri design tokens (Guided Workbench v59).
   No web fonts, no external requests: the token font stacks fall back to system fonts. */
:root{
  --paper:#F6F4EE; --sheet:#FFFFFF; --sheet2:#FBFAF6; --line:#DCD7CB; --row:#ECE8DE;
  --ink:#16181D; --muted:#596069; --faint:#80858E;
  --accent:#1F3B8F; --accentSoft:#ECEFF7; --accentLine:#CFD7EB;
  --chg:#8A5300; --chgSoft:#FBF4E6; --chgLine:#E8D5AE;
  --f-ui:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-num:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --f-note:Georgia,'Times New Roman',serif;
  --r:8px; --r-md:10px; --r-lg:12px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --paper:#111317; --sheet:#191C21; --sheet2:#1D2026; --line:#2F333B; --row:#252930;
  --ink:#E9E7E1; --muted:#A3A8B0; --faint:#7E838C;
  --accent:#9DB3F2; --accentSoft:#1D2540; --accentLine:#33406A;
  --chg:#E7B661; --chgSoft:#2B2416; --chgLine:#4E3F22;
  color-scheme:dark;
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent);text-underline-offset:2px;text-decoration-color:var(--accentLine)}
a:hover{text-decoration-color:currentColor}

.skip{position:absolute;left:-9999px;top:8px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px}
.skip:focus{left:16px;z-index:1}

/* Layout */
.site-head,main,.site-foot{width:100%;max-width:1080px;margin:0 auto;padding-left:20px;padding-right:20px}
.site-head{padding-top:22px;padding-bottom:8px}
.brand{display:inline-block;line-height:0;border-radius:4px}
.brand svg{width:106px;height:auto}
.logo-dark{display:none}
@media (prefers-color-scheme: dark){ .logo-light{display:none} .logo-dark{display:block} }
main{flex:1;padding-top:40px;padding-bottom:56px}
.site-foot{border-top:1px solid var(--line);padding-top:18px;padding-bottom:28px;color:var(--muted);font-size:13px}
.site-foot p{margin:0}

/* Type */
h1{font-size:clamp(30px,4.6vw,50px);line-height:1.04;letter-spacing:-.03em;margin:0 0 16px;font-weight:600;text-wrap:balance}
h2{font-size:clamp(20px,2.4vw,23px);line-height:1.2;letter-spacing:-.015em;margin:36px 0 10px;font-weight:600;text-wrap:balance}
.h3{font-size:17px;line-height:1.3;letter-spacing:0;margin:0 0 6px}
.story{font-family:var(--f-note);font-style:italic;font-size:19px;line-height:1.4;color:var(--muted);max-width:62ch;margin:0 0 22px}
code{font-family:var(--f-num);font-size:.86em;background:var(--sheet2);border:1px solid var(--row);border-radius:5px;padding:0 4px;overflow-wrap:anywhere}

/* Placeholders still to fill: amber = "needs a look" in Zaruri */
mark.ph{background:var(--chgSoft);color:var(--chg);border:1px dashed var(--chgLine);border-radius:4px;padding:0 3px;
  font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Button */
.btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--sheet);color:var(--ink);font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--sheet)}
.btn.pri:hover{filter:brightness(1.12)}
.btn.lg{height:44px;font-size:15px;padding:0 18px;border-radius:var(--r-md)}

/* Home */
.hero{padding:6vh 0 4vh}
.panel{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.gcal{max-width:640px}
.gcal p{margin:0;color:var(--ink)}

/* Legal pages */
.doc{max-width:70ch}
.doc h1{font-size:clamp(28px,4vw,40px)}
.doc .eff{color:var(--muted);margin:0 0 28px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 16px;padding-left:22px}
.doc li{margin:0 0 6px}
.doc li::marker{color:var(--faint)}
.doc .addr{line-height:1.7}
.table-wrap{margin:6px 0 20px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-lg);padding:4px 14px 8px;overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;vertical-align:bottom;font-family:var(--f-num);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:400;padding:10px 8px 7px;border-bottom:1px solid var(--ink)}
.table td{padding:10px 8px;border-bottom:1px solid var(--row);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.perm td:first-child{width:46%}

/* Phone */
@media (max-width:600px){
  .site-head,main,.site-foot{padding-left:16px;padding-right:16px}
  main{padding-top:24px}
  .hero{padding:3vh 0 3vh}
  .btn{min-height:44px}
  /* stack the permissions table so it never scrolls sideways */
  .perm thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .perm tr{display:block;padding:10px 0;border-bottom:1px solid var(--row)}
  .perm tr:last-child{border-bottom:0}
  .perm td{display:block;width:auto!important;padding:2px 0;border:0}
  .perm td:first-child{font-weight:600}
  .table-wrap{padding:4px 14px}
}
@media print{ .skip{display:none} body{background:#fff} mark.ph{border-style:solid} }