/* =========================================================================
   MySouthall shared styles — loaded by index.html AND thread.html.
   Design tokens + base typography + page frame live here, in one place.
   Page-specific rules stay in each page's own <style> block.
   (Full style guide: see the comment at the bottom of index.html.)
   ========================================================================= */
:root{
  --green:#00703c;--blue:#1d70b8;--dark:#0b0c0c;--grey:#505a5f;
  --border:#b1b4b6;--panel:#ede8d5;--bg:#fdf6e3;
  --brown:#4A2511;--link-hover:#003078;--focus:#ffdd00;
  --footer-bg:#3f3e39; /* 75% black over the cream page background */
}
/* html carries the footer colour so the band continues to the bottom of the
   screen when scrolling past the footer; body paints the cream page on top */
html{background:var(--footer-bg)}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--dark);line-height:1.5}
a{color:var(--blue);text-decoration:underline;font-weight:600}
a:hover{color:var(--link-hover)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
summary::-webkit-details-marker{display:none}

.wrap{width:min(calc(100% - 32px),860px);margin:0 auto;padding:16px 0 40px}
.topbar{border-bottom:3.6px solid rgba(0,0,0,0.7);padding-bottom:10px;margin-bottom:16px}
.subtitle{margin:4px 0 0;color:var(--grey);font-size:1rem}
/* footer sits OUTSIDE main.wrap (full-width band); .footer-inner re-applies
   the column width so the text lines up with the page content */
footer{margin:0;padding:14px 0;border-top:1px solid var(--border);color:var(--border);background:var(--footer-bg);font-size:.9rem}
.footer-inner{width:min(calc(100% - 32px),860px);margin:0 auto}