:root{
  --bg: #bbbbbb;
  --fg: #000;
  --link: #000099;
  --vlink: #987acf;
  --maxw: 1200px;
  --radius: 16px;
  --space-1: .45rem;
  --space-2: .9rem;
  --space-3: 1.25rem;
  --space-4: 1.75rem;
  --shadow: 0 6px 20px rgba(0,0,0,.08);
  --font-sans: Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: "Times New Roman", Times, serif;
  --font-mono: "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --fs-xl: clamp(1.4rem, 2vw + .8rem, 1.9rem);
  --fs-lg: clamp(1.125rem, 1.3vw + .7rem, 1.35rem);
  --fs-md: .95rem;
  --fs-sm: .85rem;
  --fs-xs: .8rem;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  color:var(--fg);
  background:#dcdcdc;
  font-family:var(--font-serif);
  line-height:1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  margin:0;
  color:var(--fg);
  background:#dcdcdc;
  font-family:var(--font-serif);
  line-height:1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


img{max-width:100%; height:auto; display:block}

.wrapper{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:var(--space-1) var(--space-1);
}

.hero{
  text-align:center;
  background:#dcdcdc;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--space-3);
}
.hero-title{
  font-weight:700;
  font-style:italic;
  font-family:var(--font-serif);
}
.hero-sub{
  margin-top:var(--space-1);
  font-family:var(--font-mono);
  font-style:italic;
  font-weight:700;
  font-size:var(--fs-sm);
}

.notice{
  margin:var(--space-3) auto 0;
  text-align:center;
  font-weight:700;
  font-style:italic;
  font-size:var(--fs-md);
}

.section-head{
  text-align:center;
  margin:var(--space-4) 0 var(--space-2);
}
.section-head .title{
  display:block;
  font-weight:700;
  font-size:var(--fs-xl);
}
.section-head .subtitle{
  display:block;
  font-weight:700;
  font-style:italic;
  font-size:var(--fs-lg);
}

.cta-links{
  text-align:center;
  margin:var(--space-1) 0 var(--space-2);
  font-weight:700;
}
.cta-links a{
  font-size:var(--fs-lg);
  display:inline-block;
  margin:0 .5rem;
}

.grid{
  display:grid;
  gap:var(--space-2);
  grid-template-columns:repeat(5, 1fr);
  align-items:start;
}
@media (max-width: 1100px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 820px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .grid{grid-template-columns:1fr} }

.card{
  background:#dcdcdc;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--space-1);
}

.card h2{
  margin:0 0 var(--space-1);
  font-size:var(--fs-xl);
  font-weight:700;
}
.card .lead{
  font-size:var(--fs-lg);
  font-weight:700;
}
.links{margin:var(--space-1) 0 0; padding:0; list-style:none}
.links li{margin:.2rem 0}
.links a{display:inline-block}

.links.sub{font-size:var(--fs-sm); font-weight:700;  padding-left: 1rem;}
.links.base{font-size:var(--fs-md); font-weight:700}

.footer{
  text-align:center;
  margin:var(--space-4) 0 var(--space-1);
  font-size:var(--fs-xs);
  font-style:italic;
}
.footer-note{
  text-align:center;
  margin-bottom:var(--space-4);
  font-size:var(--fs-md);

}

.center{text-align:center}
.italic{font-style:italic}
.bold{font-weight:bold}
.serif{font-family:var(--font-serif)}
.mono{font-family:var(--font-mono)}
.mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)}







/* Unique styles for Index page */
body.page-index {
  font-family: var(--font-sans);
  background: var(--bg);
}


/* Defaults for non-index pages (legacy look) */
body.legacy{
  font-family: var(--font-serif);
  background: #dcdcdc;
  line-height: normal;
}
/* Restore comfortable spacing typical of legacy HTML */
body.legacy p{ margin: 1em 0; }
body.legacy ul, 
body.legacy ol{ margin: 1em 0 1em 2em; }
body.legacy li{ margin: .25em 0; }



/* Legacy HTML text semantics (to preserve original visuals) */
b, strong, .bold { font-weight: 700; }
i, em, .italic { font-style: italic; }
big { font-size: larger; }
small { font-size: smaller; }

/* Comfortable default spacing akin to legacy HTML */
body.legacy { line-height: normal; }
body.legacy p { margin: .4rem 0 .6rem; }
body.legacy ul, body.legacy ol { margin: 1em 0 1em 2em; }
body.legacy li { margin: .25em 0; }



/* (removed old default table styling) */
body.legacy table {
  display: table; /* shrink-to-fit */
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}



body.legacy th {
  font-weight: 700;
  text-align: left;
  background: #eee;
}



/* Compact, responsive table styling for legacy pages */
body.legacy table {
  display: table; /* shrink-to-fit */
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 0.95rem; /* slightly smaller for dense tables */
}



body.legacy th {
  font-weight: 700;
  text-align: left;
  background: #eee;
}

/* Make wide tables scrollable on small screens */
body.legacy .table-wrapper {
  width: 100%;
  overflow-x: auto;
}

body.legacy .table-wrapper table {
  min-width: 500px; /* prevent columns from squishing too much */
}





/* Allow horizontal scroll if needed without breaking layout */
  body.legacy table{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Slightly tighter padding on small screens */
  
  /* Keep text legible but compact */
  body.legacy table{
    font-size: 0.95rem;
  }
}



/* Mobile-friendly tweaks */
  
}



/* don't force full-width; match legacy behavior */
}

/* Ultra-tight cell padding */


/* Kill paragraph/list margins inside table cells (common cause of "tall" cells) */
body.legacy table p{ margin: 0; }
body.legacy table ul,
body.legacy table ol{ margin: 0; padding-left: 1.25em; }
body.legacy table li{ margin: 0; }

/* Slightly tighter line-height just for tables */
body.legacy table{ line-height: 1.1; }

/* Mobile refinements */
  
}



/* Minimal “carded” table style for legacy pages */
body.legacy table {
  display: table; /* shrink-to-fit */
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ccc;     /* light outer border */
  border-radius: 4px;         /* rounded corners */
  overflow: hidden;
  width: auto;
}



body.legacy th {
  background: #fafafa;
  font-weight: 700;
}

body.legacy tr:last-child td {
  border-bottom: none;        /* remove last row line */
}

/* Mobile refinements still apply */
  
}



/* Modern subtle table separators */
body.legacy table {
  display: table; /* shrink-to-fit */
  border-collapse: collapse;
  width: auto;
}



body.legacy th {
  border-bottom: 2px solid #bbb; /* stronger line under header */
  background: #fafafa;
  font-weight: 700;
}



/* Soft gray grid styling for legacy tables */
body.legacy th,
body.legacy td {
  border: 1px solid #aaa;    /* softer than pure black */
  padding: 1px 2px;
  vertical-align: top;
}

body.legacy th {
  background: #f2f2f2;       /* light gray header background */
  font-weight: 700;
}



/* Minimal “carded” table style for legacy pages */
body.legacy table {
  display: table; /* shrink-to-fit */
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ccc;     /* light outer border */
  border-radius: 4px;         /* rounded corners */
  overflow: hidden;
  width: auto;
  margin: 1em 0;
  line-height: 1.1;
}

body.legacy th,
body.legacy td {
  border-bottom: 1px solid #eee;
  padding: 1px 2px;
  vertical-align: top;
}

body.legacy th {
  font-weight: 700;
  background: #fafafa;
}

body.legacy tr:last-child td {
  border-bottom: none;        /* remove last row line */
}

/* Mobile refinements */
  body.legacy th,
  body.legacy td{
    padding: 1px 2px;
    white-space: normal;
    word-break: break-word;
  }
}



/* Table enhancements: hover highlight, soft shadow, rounded header corners */
body.legacy table {
  display: table; /* shrink-to-fit */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

body.legacy tr:hover td {
  background: #f5f5f5;
}

body.legacy thead th:first-child { border-top-left-radius: 4px; }
body.legacy thead th:last-child  { border-top-right-radius: 4px; }



/* Column highlight on hover */
body.legacy td:hover,
body.legacy th:hover {
  background: #eaeaea;
}







/* Header rounding fallback when no <thead> */
body.legacy table tr:first-child th:first-child,
body.legacy table tr:first-child td:first-child { border-top-left-radius: 4px; }
body.legacy table tr:first-child th:last-child,
body.legacy table tr:first-child td:last-child  { border-top-right-radius: 4px; }



/* JS-assisted column highlight */
body.legacy td.col-active,
body.legacy th.col-active {
  background: #f0f7ff !important;
}

/* ===== Non-index (legacy) page defaults ===== */
body.legacy{
  font-family: var(--font-serif);
  background: #dcdcdc;
  line-height: normal;
}
body.legacy p{ margin: 1em 0; }
body.legacy ul, 
body.legacy ol{ margin: 1em 0 1em 2em; }
body.legacy li{ margin: .25em 0; }

/* Legacy HTML semantics */
b, strong, .bold { font-weight: 700; }
i, em, .italic { font-style: italic; }
big { font-size: larger; }
small { font-size: smaller; }

/* ===== Table: minimal “carded” style ===== */
body.legacy table {
  display: table; /* shrink-to-fit */
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  width: auto;
  margin: 1em 0;
  line-height: 1.1;
}
body.legacy th,
body.legacy td {
  border-bottom: 1px solid #eee;
  padding: 1px 2px;
  vertical-align: top;
}
body.legacy th {
  font-weight: 700;
  background: #fafafa;
}
body.legacy tr:last-child td { border-bottom: none; }

/* Row hover */
body.legacy tr:hover td { background: #f5f5f5; }

/* Header rounded corners (thead or first row fallback) */
body.legacy thead th:first-child { border-top-left-radius: 4px; }
body.legacy thead th:last-child  { border-top-right-radius: 4px; }
body.legacy table tr:first-child th:first-child,
body.legacy table tr:first-child td:first-child { border-top-left-radius: 4px; }
body.legacy table tr:first-child th:last-child,
body.legacy table tr:first-child td:last-child  { border-top-right-radius: 4px; }

/* Column hover highlight (driven by JS adding .col-active) */
body.legacy td.col-active,
body.legacy th.col-active { background: #f0f7ff !important; }

/* Mobile */
@media (max-width: 560px){
  body.legacy table{
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.9rem;
  }
  body.legacy th,
  body.legacy td{
    padding: 1px 2px;
    white-space: normal;
    word-break: break-word;
  }
}


/* Optional helper: make specific tables stretch full width by adding class="table-full" */
body.legacy table.table-full { width: 100%; }


/* Shared site chrome */
.site-chrome { max-width: var(--maxw); margin: 0 auto; padding: var(--space-1) var(--space-1); }
.site-header.site-header .back-link { display:inline-block; font-weight:700; margin: var(--space-1) 0; }
.site-footer { text-align:center; font-size: var(--fs-xs); font-style: italic; margin-top: var(--space-4); 
}


/* ===== Shared site header/footer (JS-injected) ===== */
.site-chrome { max-width: var(--maxw); margin: 0 auto; padding: var(--space-1) var(--space-1); }
.site-header { text-align: left; }
.site-header .back-link { display:inline-block; margin: var(--space-1) 0; text-decoration: underline; }
.site-footer { text-align:center; font-family: var(--font-sans); margin-top: var(--space-4); }
.site-footer .line1 { font-style: italic; }



/* === Site Chrome (shared header/footer) === */
.site-chrome{ max-width: var(--maxw); margin: 0 auto; padding: var(--space-1) var(--space-1); }
.site-header{ text-align: left; }
.site-header .back-link{ display:inline-block; font-weight:700; margin: var(--space-1) 0; }
.site-footer{ text-align:center; font-family: var(--font-sans); margin-top: var(--space-4); }
.site-footer .line1{ font-style: italic; }
.site-footer .line2{ margin-top: var(--space-1); }



/* Header should be flush-left (not centered container) */
.site-header{
  max-width: 100%;
  margin: 0;              /* no auto-centering */
  padding: var(--space-1) var(--space-1);
  text-align: left;
}
.site-header .back-link{
  display: inline-block;
  margin: var(--space-1) 0;
}



/* Footer: left-aligned Back to Main above centered copyright */
.site-footer .footer-top{
  text-align: left;
  margin-bottom: var(--space-1);
  border-bottom: 2px solid #fff; /* inherit color */
}
.site-footer .footer-top .back-link{
  display: inline-block;
  font-weight: 700;
}



/* === Footer alignment & sizing fixes === */
/* Make footer container full-width so the Back to Main is truly flush-left */
.site-footer{
  max-width: 100%;
  margin: 0;
  padding: var(--space-1) var(--space-1);
  text-align: center;              /* keep copyright centered */
  font-family: var(--font-sans);  /* as requested */
  font-size: inherit;              /* match page's base font size */
}
/* Left-align the Back to Main in the footer */
.site-footer .footer-top{
  text-align: left;
  margin-bottom: var(--space-1);
}
.site-footer .footer-top .back-link{
  display: inline-block;
  font-weight: 700;
}


/* Neutral link styling: match original page text unless HTML explicitly underlines/colors */


.underline{ text-decoration: underline; }

/* Link styling: only true links */
a[href]:not([href=""]) { color: var(--link); text-decoration: underline; }
a[href]:not([href=""]):visited { color: var(--vlink); }
a:not([href]), a[href=""], a[href^="javascript:"]{ color: inherit; text-decoration: none; }


/* Do NOT style non-links or empty anchors as links */
a:not([href]), a[href=""]{
  color: inherit;
  text-decoration: none;
}


/* Layout tables that contain images: keep images at intrinsic size (no squish) */
table.layout-table { table-layout: auto; }
table.layout-table img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}



/* avoid inheriting collapsed grid lines */
/*  border-spacing: 0;          no gaps */
}
table.layout-table th,
table.layout-table td{
  border: none !important;        /* remove cell lines */
  background: transparent;        /* neutral background */
  padding: 0.25rem 0.5rem;        /* gentle spacing; adjust as needed */
}
table.layout-table img{
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}
/* Kill hover highlight and column highlight just for layout tables */
table.layout-table tr:hover td{
  background: inherit !important;
  background-color: transparent !important;
}
table.layout-table td.col-active,
table.layout-table th.col-active{
  background: inherit !important;
  background-color: transparent !important;
}


/* ===== Layout tables (images + text): intrinsic sizing, no borders, NO highlight (scoped to direct cells only) ===== */
table.layout-table{
  table-layout: auto;
  border: none !important;
  border-collapse: separate;
  border-spacing: 0;
}
/* Direct cell borders off (avoid affecting nested tables) */
table.layout-table > tr > th,
table.layout-table > tr > td,
table.layout-table > tbody > tr > th,
table.layout-table > tbody > tr > td{
  border: none !important;
  background: transparent;
  padding: 0.25rem 0.5rem;
}
/* Keep images at natural size */
table.layout-table img{
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}
/* Disable row hover ONLY for direct rows of the layout table */
table.layout-table > tr:hover > td,
table.layout-table > tbody > tr:hover > td{
  background: inherit !important;
}
/* Disable column highlight ONLY for direct cells of the layout table */
table.layout-table > tr > td.col-active,
table.layout-table > tr > th.col-active,
table.layout-table > tbody > tr > td.col-active,
table.layout-table > tbody > tr > th.col-active{
  /* background: inherit !important; */
  background-color: transparent !important;
}

/* Ensure nested tables inside layout tables use normal table styles & highlighting */
table.layout-table table{
  border-collapse: separate;
  border-spacing: 0;
  /* Do not inherit border removal */
}



/* Ensure nested data tables inside image layout tables stack vertically */
table.layout-table table{
  display: table !important;   /* undo global inline-table */
  width: auto !important;      /* honor intrinsic widths */
  margin-left: auto;
  margin-right: auto;
  background-color: transparent;
}




/* Added by migration: text & heading utility classes */
.text-normal{font-weight:400;font-style:normal;font-size:1em;}
.text-bold{font-weight:700;font-style:normal;font-size:1em;}
.text-italic{font-weight:400;font-style:italic;font-size:1em;}
.text-bold-italic{font-weight:700;font-style:italic;font-size:1em;}
.text-small{font-weight:400;font-style:normal;font-size:0.9em;}
.heading-1{font-weight:800;font-size:2em;line-height:1.2;}
.heading-2{font-weight:800;font-size:1.75em;line-height:1.2;}
.heading-3{font-weight:800;font-size:1.5em;line-height:1.2;}
.heading-4{font-weight:800;font-size:1.25em;line-height:1.2;}
.heading-5{font-weight:800;font-size:1.125em;line-height:1.2;}




/* utility classes */
.text-underline { text-decoration: underline; }
.text-strike { text-decoration: line-through; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.font-sans { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.text-xs { font-size: 0.75em; }
.text-sm { font-size: 0.875em; }
.text-base { font-size: 1em; }
.text-lg { font-size: 1.125em; }
.text-xl { font-size: 1.25em; }




/* === Modernization Patch === */
:root{ --measure:68ch; --link:#0b57d0; }
html { font-size:16px; }
body{ margin:0; color:#111; background:#fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; line-height:1.6;}
.main, .content { max-width: var(--measure); margin:0 auto; padding:1.25rem; } /* margin:0 auto */
p { margin: .4rem 0 .6rem; }
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5 { display:block; font-weight:800; letter-spacing:-0.01em; line-height:1.2; margin:1.4em 0 .6em; }
.heading-1 { font-size: clamp(2rem, 3.5vw + .5rem, 3rem); }
.heading-2 { font-size: clamp(1.6rem, 2.5vw + .5rem, 2.25rem); }
.heading-3 { font-size: clamp(1.3rem, 1.6vw + .6rem, 1.6rem); }
.heading-4 { font-size: 1.25rem; }
.heading-5 { font-size: 1.125rem; }

a { color: var(--link); text-decoration: underline; text-underline-offset:.15em; text-decoration-thickness:1px; font-size: inherit; display:inline; margin:0; }
a:hover { text-decoration-thickness:2px; }




/* === Stabilize tables & link sizes === */
a, .links a, .cta-links a { font-size: inherit !important; display:inline !important; margin:0 !important; }
table { display: table !important; border-collapse: collapse; margin:1em 0; line-height:1.1; font-size:0.95rem; }
th, td { border:1px solid #d8d8d8; }
thead th { background:#f8fafc; }




/* === table hover highlight === */
table.data-hover tr.row-hover > td,
table.data-hover tr.row-hover > th { background-color: #eef5ff; }
table.data-hover td.col-hover,
table.data-hover th.col-hover { background-color: #fffbe6; }
table.data-hover tr.row-hover > td.col-hover,
table.data-hover tr.row-hover > th.col-hover { background-color: #eaf2ff; }




/* === v14: normal body spacing for layout tables that include images === */
table.has-image-table {
  line-height: 1.6;
  font-size: 1em;
}
table.has-image-table p { margin: .4rem 0 .6rem; }




/* === v18 Dark Theme Recolor ============================================= */
/* Palette */
:root{
  --bg: #0f1115;              /* main background: dark gray */
  --bg-elev-1: #151a22;       /* cards / slightly lighter surfaces */
  --text: #c6d3d7;            /* body text: light gray-teal */
  --text-muted: #9fb0b6;      /* secondary text */
  --heading: #67e8f9;         /* headings: saturated cyan */
  --link: #8fbbff;            /* links: normal blue */
  --link-visited: #987acf;    /* visited: purple */
  --border: #2a2f3a;          /* separators, table gridlines */
  --border-strong: #344050;
  --highlight-row: #132232;   /* table row hover (teal-tinted) */
  --highlight-col: #1a2836;   /* table column hover */
  --highlight-intersection: #173048; /* intersection cell */
}

/* Global colors */
html, body { background: var(--bg); color: var(--text); }
body { color: var(--text); }
/* Common "card" surfaces (if used) */
.content, .main, .card, .panel, .box { background: var(--bg-elev-1); }

/* Headings more saturated */
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5 { color: var(--heading); }

/* Links: normal blues & purples */
a { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-thickness: 2px; }

/* Tables: match main background; keep gridlines visible */
table { background: var(--bg); }
th, td { border-color: var(--border); }
thead th { background: var(--bg); color: var(--text); }

/* Table hover colors on dark bg */
table.data-hover tr.row-hover > td,
table.data-hover tr.row-hover > th { background-color: var(--highlight-row); }
table.data-hover td.col-hover,
table.data-hover th.col-hover { background-color: var(--highlight-col); }
table.data-hover tr.row-hover > td.col-hover,
table.data-hover tr.row-hover > th.col-hover { background-color: var(--highlight-intersection); }

/* Selection for better UX on dark */
::selection { background: rgba(59,130,246,.35); color: #eaf6ff; }




/* === v20: subtle emphasis tints === */
:root{
  --bold-tint: #c3d3d9; 
  --italic-tint: #b7d7d1; /* very slight teal */
}

/* Apply only to NORMAL-SIZE emphasis, not headings or resized text */
.text-bold:not(.text-xs):not(.text-sm):not(.text-lg):not(.text-xl),
.text-bold-italic:not(.text-xs):not(.text-sm):not(.text-lg):not(.text-xl) {
  color: var(--bold-tint);
}
.text-italic:not(.text-xs):not(.text-sm):not(.text-lg):not(.text-xl) {
  color: var(--italic-tint);
}

/* If any legacy <strong>/<em> slipped through without size classes, tint them only
   when not inside a heading block */
:where(p, li, td, th, div):not(.heading-1):not(.heading-2):not(.heading-3):not(.heading-4):not(.heading-5) strong,
:where(p, li, td, th, div):not(.heading-1):not(.heading-2):not(.heading-3):not(.heading-4):not(.heading-5) b {
  color: var(--bold-tint);
}
:where(p, li, td, th, div):not(.heading-1):not(.heading-2):not(.heading-3):not(.heading-4):not(.heading-5) em,
:where(p, li, td, th, div):not(.heading-1):not(.heading-2):not(.heading-3):not(.heading-4):not(.heading-5) i {
  color: var(--italic-tint);
}




/* === v24: color tweaks (body/link visibility) === */
:root{
  /* Normal body text slightly darker so bold tint stands out */
  --text: #b7c4c9;

  /* Links slightly lighter and less saturated to read better on dark bg */
  --link: #6fa2f4;
  --link-visited: #987acf;
}




/* === v25: wide layout with side gutters (RPG rulebook style) === */
:root{
  /* Responsive side margin that scales with viewport */
  --page-gutter: clamp(12px, 3.5vw, 48px);
  /* Allow wide rulebook text without squishing */
  --measure-max: 140ch;
}

/* Global gutters so text never hits the screen edge */
body { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }

/* Keep .main/.content wide while centered; avoid double-padding with body */
.main, .content {
  max-width: min(var(--measure-max), 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}




/* === v26: Per-page TOC sidebar === */
:root{
  --toc-width: 280px;
  --toc-gap: 20px;
}
/* Base styling */
#toc {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--toc-width);
  height: 100vh;
  overflow-y: auto;
  background: var(--bg-elev-1);
  border-right: 1px solid var(--border);
  padding: 12px 12px 16px;
  box-sizing: border-box;
  z-index: 60;
  display: none; /* default hidden; enabled at wide screens */
}
#toc .toc-title {
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--heading);
}
#toc .toc-list, #toc .toc-list ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
#toc li { margin: 2px 0; }
#toc a {
  display: block;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}
#toc a.active {
  color: var(--heading);
  background: rgba(103,232,249,0.08); /* subtle cyan tint */
  border-left: 3px solid var(--heading);
  padding-left: 5px;
}
/* Indentation per level */
#toc .toc-l2 a { padding-left: 14px; }
#toc .toc-l3 a { padding-left: 24px; }
#toc .toc-l4 a { padding-left: 34px; }
#toc .toc-l5 a { padding-left: 44px; }

/* Mobile toggle */
#toc-toggle {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 70;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev-1);
  color: var(--text);
  cursor: pointer;
}
/* Mobile panel */
@media (max-width: 1279px){
  #toc { 
    display: none;
    position: fixed;
    width: min(80vw, 340px);
    transform: translateX(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
  }
  body.toc-open #toc { display: block; }
  #toc-toggle { display: inline-block; }
}
/* Desktop: show sidebar and push content over */
@media (min-width: 1280px){
  #toc { display: block; }
  #toc-toggle { display: none; }
  body.has-toc { padding-left: calc(var(--page-gutter) + var(--toc-width) + var(--toc-gap)); }
}





/* Make anchor landings comfortable */
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5 { scroll-margin-top: 16px; }




/* v27: TOC label + no-wrap for long items */
#toc .toc-title { white-space: nowrap; }
#toc a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--toc-width) - 24px); }




/* === Site Pages right sidebar === */
:root{
  --pages-width: 200px;
  --pages-gap: 20px;
}
#pages-rail{
  position: fixed;
  top: 0;
  right: 0;
  width: var(--pages-width);
  height: 100vh;
  overflow-y: auto;
  background: var(--bg-elev-1, #1c222b);
  border-left: 1px solid var(--border, #2a2f3a);
  padding: 12px 12px 16px;
  box-sizing: border-box;
  z-index: 60;
  display: none; /* enabled by media + class */
}
#pages-rail .pages-title{
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--heading, #67e8f9);
  white-space: nowrap;
}
#pages-rail .pages-list{ list-style:none; margin:0; padding:0; }
#pages-rail li{ margin: 2px 0; }
#pages-rail a{
  display:block;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--text, #c6d3d7);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#pages-rail a:hover{ background: rgba(103,232,249,0.06); }
#pages-rail a.active{
  color: var(--heading, #67e8f9);
  background: rgba(103,232,249,0.08);
  border-right: 3px solid var(--heading, #67e8f9);
  padding-right: 5px;
}

/* Toggle button for small/medium screens */
#pages-toggle{
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 70;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, #2a2f3a);
  background: var(--bg-elev-1, #1c222b);
  color: var(--text, #c6d3d7);
  cursor: pointer;
  display: inline-block;
}

/* Mobile/Medium: off-canvas panel */
@media (max-width: 1399px){
  #pages-rail{ 
    display: none;
    position: fixed;
    width: min(80vw, 340px);
    transform: translateX(8px);
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
  }
  body.pages-rail-open #pages-rail{ display:block; }
  #pages-toggle{ display: inline-block; }
}

/* Desktop: show sidebar and push content over */
@media (min-width: 1400px){
  #pages-rail{ display: block; }
  #pages-toggle{ display: none; }
  body.has-pages-rail{
    padding-right: calc(var(--page-gutter, 16px) + var(--pages-width) + var(--pages-gap));
  }
}




/* === Sidebars tweak: slightly smaller text & narrower rails === */
:root{
  --toc-width: 240px;
  --pages-width: 200px;
}

#toc a, #pages-rail a { font-size: 0.92em; }


/* v3: sidebars use .text-sm; anchors inherit */
#toc a, #pages-rail a { font-size: inherit !important; }



/* === Link visibility tweak: brighten links & especially visited links === */
:root{
  --link: #8fbbff;         /* brighter blue for better contrast */
  --link-visited: #987acf; /* much brighter purple so it doesn't get lost */
}


/* pages divider styling */
#pages-rail .pages-divider{
  margin: 10px 6px 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border, #2a2f3a);
  color: var(--text-muted, #9fb0b6);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pages-rail .pages-divider-major {
  font-weight: 700;
}

#pages-rail .pages-divider-sub {
  padding-left: 0.75rem;
  font-style: italic;
}

/* species page: ensure images display at intrinsic size */
.img-actual { width: auto !important; height: auto !important; max-width: none !important; }


/* === Generic one-picture-beside-text block ==============================
   Usage: .media-side wraps a text block and a single image (with optional caption).
   Stacks on small screens, becomes two columns on wider screens.
   Matches normal page width (no extra narrowing).
   ====================================================================== */

.media-side{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: inherit;
  display: grid;
  gap: var(--space-3, 1.25rem);
  align-items: start;
  padding-block: var(--space-2, .9rem);
}

.media-side__body{
  /* No artificial line-length cap so it matches your main body text width */
  max-width: none;
}

.media-side__figure{ justify-self: center; }
.media-side__figure img{ max-width: 100%; height: auto; display: block; }
.media-side__figure figcaption{ margin-top: .5rem; text-align: center; font-style: italic; }

@media (min-width: 800px){
  .media-side{
    grid-template-columns: 1fr minmax(220px, 340px);
  }
}

/* Center image to match caption alignment */
.media-side__figure{ text-align: center; }
.media-side__figure img{ margin-left: auto; margin-right: auto; display: block; }


/* === Media-side adjustments: center image, figure above text, single-column === */
.media-side{ grid-template-columns: 1fr; }
.media-side__figure{ justify-self: center; text-align: center; }
.media-side__figure img{ margin-left: auto; margin-right: auto; }
/* Ensure desktop does not switch back to two columns */
@media (min-width: 800px){
  .media-side{ grid-template-columns: 1fr; }
}


/* === Media-side tweak: center image + show figure before text on narrow screens === */
.media-side{
  /* On mobile-first: figure above, text below */
  grid-template-areas: "figure" "body";
}

.media-side__figure{
  grid-area: figure;
  text-align: center;
  justify-self: center;
}

.media-side__figure img{
  display: block;
  margin: 0 auto;  /* center the image like the caption */
}

.media-side__body{
  grid-area: body;
}

/* On wider screens, keep two columns with text left and figure right */
/* === Media-side desktop layout: two columns; image prefers intrinsic width === */
@media (min-width: 800px){
  .media-side{
    grid-template-columns: 1fr minmax(220px, max-content);
    grid-template-areas: "body figure";
  }
}



/* === Caption wrap fix: avoid tiny image & one-letter wraps ================== */
.media-side__figure{
  width: auto !important;           /* don’t shrink to min-content */
  display: block !important;        /* avoid inline shrink-to-fit quirks */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.media-side__figure img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Cap caption line length instead of binding it to image width exactly */
.media-side__figure figcaption{
  max-width: 40ch;                  /* tweak this to taste (35–50ch) */
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: break-word;        /* break long tokens only when needed */
  word-break: normal;
  hyphens: auto;
}

/* Footer mark: show at natural size but shrink on small screens */
.site-footer .footer-mark{
  display:block;
  width: min(500px, 100vw);
  height: auto;
  margin: var(--space-1) auto 0;
}

/* Footer divider: horizontal line between playtesting and mark */
.site-footer .footer-divider{
  border-top: 2px solid #fff;
  margin: var(--space-1) 0;
}

/* ------*/

/* Viewport-locked background (no tiling), content scrolls over it */
body.has-toc{
  /* Create a stacking context so ::before can sit behind content safely */
  position: relative;
  z-index: 0;

  /* Keep only the solid color here */
  /* background-color: #0f1115 !important; */

  /* Remove any previous background-* from earlier iterations */
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important; /* irrelevant now */
}

/* One fixed panel the size of the viewport; never tiles */
body.has-toc::before{
  content:"";
  position: fixed;        /* pinned to the viewport */
  inset: 0;
  z-index: -1;            /* behind all normal content */
  pointer-events: none;

  /* Two layers: soft vignette on top, bitmap beneath */
  background-image:
    /* radial-gradient(ellipse at 50% -10%, rgba(0,0,0,.25), rgba(0,0,0,.45) 60%, rgba(0,0,0,.55)), */
    image-set(
      /* url('background.webp') type('image/webp') 1x, */
      url('background.png')  type('image/png')  1x
    );

  /* No tiling, both layers exactly one viewport in size */
  background-repeat: no-repeat; /* , no-repeat; */
  /* background-size: 100dvw 100dvh' /* , 100dvw 100dvh; */
  background-size: cover;
  background-position: center center; /* , center center; */
}

/* ----- */

/* Force image-layout tables to be see-through */
table.layout-table{
  background-color: transparent !important; /* override table { background } */
  border-collapse: separate; /* keep its intended model */
  border-spacing: 0;
}
table.layout-table th,
table.layout-table td{
  background-color: transparent !important;
}
.media-side{
  background-color: transparent !important;
}
/* ------*/

/* Remove bullets and tighten indentation */
#toc ul {
  list-style: none;
  padding-left: 0;          /* no default UL padding */
  margin: 0;                /* reset margins */
}

#toc ul ul {
  margin-left: 0.6rem;      /* small indent for nested levels */
}

#toc li {
  margin: 0;                /* no extra gaps */
  padding-left: 0;          /* align text nicely */
}

/* Optional: compact line height and smaller text */
#toc {
  font-size: 0.9rem;        /* already has .text-sm, but this ensures it */
  line-height: 1.6;
}

/* Optional: link styles */
#toc a {
  text-decoration: none;
}
#toc a:hover {
  text-decoration: underline;
}
#toc a.active {
  font-weight: 600;
}

#toc .toc-back-link {
  display: inline-block;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
  text-decoration: none;
  line-height: 2.5;
}
#toc .toc-back-link:hover { text-decoration: underline; }

/*------*/