/* =============================================================================
   onion.cafe — shared stylesheet
   -----------------------------------------------------------------------------
   100% static, NO JavaScript. Every page links this one file. Edit the colors
   here and the whole site changes. Designed to render identically in Tor
   Browser at the "Safest" security level (JS fully disabled).
   ============================================================================= */

:root{
  --bg:#f2f2f2; --purple:#714ba6; --purple-d:#5a3a85; --purple-l:#bea3d9;
  --green:#097319; --cream:#f2e5bd; --ink:#222;
  --up:#097319; --down:#c0392b; --issues:#e67e22;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink);
      font-family:"Times New Roman", Times, serif; font-size:16px; line-height:1.5; }
.wrap{ max-width:760px; margin:0 auto; padding:16px; text-align:center; }

img.logo{ max-width:300px; width:78%; height:auto; }
.tag{ color:var(--green); font-style:italic; margin:2px 0 10px; }
hr{ border:none; border-top:2px solid var(--purple); max-width:380px; margin:12px auto; }

nav{ margin:10px 0 20px; }
nav a{ color:var(--purple); font-weight:bold; text-decoration:none; margin:0 12px; font-size:17px; }
nav a:hover{ text-decoration:underline; }
nav a.here{ color:var(--green); text-decoration:underline; }

a{ color:var(--purple); }
a:visited{ color:var(--purple-d); }
a:hover{ color:var(--green); }

/* notices strip */
.notices{ text-align:left; max-width:600px; margin:0 auto 18px; border:1px solid var(--purple-l);
  background:#fff; padding:8px 12px; font-size:14px; }
.notices h2{ font-size:13px; color:var(--purple); margin:0 0 4px; text-transform:uppercase; letter-spacing:1px; }
.notices ul{ margin:0; padding-left:18px; }

/* directory — three plain columns */
.dir{ text-align:left; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:600px){ .dir{ grid-template-columns:1fr 1fr; } }
@media (max-width:400px){ .dir{ grid-template-columns:1fr; } }
.cat h2{ font-size:15px; color:var(--purple); border-bottom:1px solid var(--green);
         margin:0 0 5px; padding-bottom:2px; }
.cat ul{ list-style:none; margin:0; padding:0; }
.cat li{ padding:1px 0; }
.dot{ font-size:11px; vertical-align:middle; }
.dot.up{ color:var(--up); }
.dot.down{ color:var(--down); }
.dot.issues{ color:var(--issues); }
.mir{ font-size:13px; color:var(--issues); }
.mir-sep{ color:#bbb; }
.blurb{ font-size:13px; color:#777; margin:0 0 5px; }

/* status legend */
.legend{ text-align:center; font-size:12px; color:#888; margin:18px 0 0; }
.legend .dot{ margin-left:10px; }

/* blog */
.blog{ text-align:left; }
.post{ margin-bottom:26px; }
.post h2{ margin:0; color:var(--purple); }
.post .meta{ font-size:12px; color:#999; }
.post img{ max-width:100%; }
blockquote{ border-left:3px solid var(--green); margin:8px 0; padding-left:10px; color:#555; }
code{ background:var(--cream); padding:1px 3px; }
pre{ background:var(--cream); padding:8px; overflow:auto; text-align:left; }

/* contact */
.contact{ text-align:left; max-width:560px; margin:0 auto; }
.contact h2{ color:var(--purple); border-bottom:1px solid var(--green); padding-bottom:3px; }
.contact p{ color:#444; }
.contact .addr{ font-family:"Courier New", monospace; background:var(--cream);
  padding:6px 10px; display:inline-block; }
.contact .keybox{ border:1px solid var(--purple-l); background:#fff; padding:10px 14px; margin-top:14px; }
.contact .keybox h3{ margin:0 0 4px; color:var(--purple-d); font-size:15px; }

footer{ margin:30px 0 12px; color:#999; font-size:12px; }
footer a{ color:var(--purple); margin:0 5px; }