:root{
  --bg: #a8c2de;
  --panel: #dcdcdc;
  --text: #111111;
  --line: #2a2a2a;
  --accent: #000080;
  --accent-2: #00003a;
  --stroke: 3px;
  --radius: 2px;
  --shadow-off: 6px;
  --maxw: 1120px;
  --shadow-color: rgba(0,0,0,.38);
  --shadow-color-post-hover: rgba(0,0,0,.56);

  /* layout helpers (easy to tweak) */
  --profile-width: 12.0rem;    /* width of #profile-container */
  --badge-width: 8.25rem;      /* width of #badges-rail */
  --topbar-gap: 1.125rem;      /* gap between #profile-container and #header */
  --link-pit-height: 26.875rem;/* height of #link-pit (banner) */

  /* shared panel height (kept for other uses) */
  --panel-height: var(--link-pit-height);

  /* GALLERY HEIGHT VARIABLES - KEEP CURRENT VALUES, CHANGE TO ADJUST GALLERY SIZE */
  --gallery-height: 12rem;     /* GALLERY HEIGHT VARIABLE */
  --gallery-height-lg: 12rem;  /* LARGE SCREEN GALLERY HEIGHT VARIABLE */

  /* BADGE RAIL START VARIABLE - negative values lift the rail up */
  --badge-rail-start: -3rem;
}

/* Reset / base */
* { box-sizing: border-box; }
html,body { margin: 0; padding: 0; }

body#body, #body {
  background: var(--bg);
  background-image: url("background2.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.6 "Trebuchet MS","Segoe UI",Arial,sans-serif;
  text-align: center;
  padding: 1.625rem 0.875rem;
}

#content {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: left;
}

/* Links */
a:link, a:visited { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; }
#main a:link, #main a:visited { color: #111; }
#main a:hover { color: var(--accent); }

/* Topbar layout */
#topbar {
  display: flex;
  align-items: flex-start;
  gap: var(--topbar-gap);
  margin: 0 0 1.25rem;
}

/* Profile card: EXACT MATCH to banner height, minimized padding, no scrollbar.
   The image is limited to 140px; the text area is constrained to the leftover space. */
#topbar #profile-container {
  width: var(--profile-width);
  flex: 0 0 var(--profile-width);
  margin: 0;
  padding: 0.28rem 0.35rem; /* minimal padding to save vertical space */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  background: var(--panel);
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--shadow-color);
  z-index: 3;
  box-sizing: border-box;

  /* Force exact banner height; include padding/borders via box-sizing */
  height: var(--panel-height);
  /* Do NOT use overflow:auto here (no scrollbars). Content is constrained below. */
}

/* Header area */
#topbar #header {
  flex: 1 1 auto;
  margin: 0;
  background: transparent;
  border: 0;
  padding: 0;
  min-width: 0;
}
#topbar #header > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0;
  min-width: 0;
}

/* Panels style reused */
.post,
#link-pit,
#badges-rail,
#footer,
#footer-visitors {
  background: var(--panel);
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-off) var(--shadow-off) 0 var(--shadow-color);
}

/* Titles */
.profile-owner-title { font-weight: 800; font-size: 0.95rem; margin-bottom: 0.25rem; }

/* Banner / link pit - use shared panel height variable for banner itself */
#link-pit {
  width: 100%;
  min-height: var(--panel-height);
  height: var(--panel-height);
  padding: 0.875rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
}
#link-pit.library-hero { min-height: auto; height: auto; display: block; }

#blog-title {
  grid-column: 1 / -1;
  margin: 0 0 0.625rem;
  padding: 0 0 0.625rem;
  text-align: left;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  border-bottom: 0.125rem solid #555;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
#blog-title.no-title-underline { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
#blog-title .title-text { display:block; min-width:0; }
#blog-title .title-nav {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
#blog-title .title-nav a {
  color: #111 !important;
  background: #efefef;
  border: 0.125rem solid #444;
  padding: 0.25rem;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  min-width: 2.875rem;
}
#blog-title .title-nav a:hover { background: #ddd; color: #000 !important; }
#blog-title .title-nav a.icon-nav img { width: 2.375rem; height: 2.375rem; object-fit: contain; }

/* Pit halves and mini-index */
.pit-half { min-height: 0; padding: 0.625rem 0.75rem; }
.pit-results {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pit-buttons {
  border-left: 0.1875rem solid #555;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pit-mini-index { height:100%; margin:0; padding:0; border:0; box-shadow:none; background:transparent; display:flex; flex-direction:column; min-height:0; }
.pit-mini-index .sidebar-title { margin:0 0 0.5rem; padding:0 0 0.5rem; border-bottom:0.125rem solid #555; color:#111; font-size:1rem; font-weight:800; }

/* --- Restoration patch: ensure flex children can shrink and #recently can scroll ---
     These few rules are intentionally narrow and restore the "beautiful" scrollbar
     behavior without changing any other layout or visual properties. Do NOT remove. */
.pit-mini-index .index2 {
  display: flex;
  flex-direction: column;
  min-height: 0; /* critical for flex children to allow overflow and scrolling */
}
.pit-mini-index #recently {
  margin: 0;
  padding: 0 0.375rem 0 0;
  list-style: none;
  flex: 1 1 auto;  /* fill available space, allow scrolling when overflow */
  min-height: 0;   /* critical */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: #2a2a2a #cfcfcf;    /* Firefox: thumb, track */
}
/* WebKit scrollbar styling to recreate the beveled look you liked */
.pit-mini-index #recently::-webkit-scrollbar { width: 0.625rem; }
.pit-mini-index #recently::-webkit-scrollbar-track { background: #cfcfcf; }
.pit-mini-index #recently::-webkit-scrollbar-thumb { background: #2a2a2a; border: 0.125rem solid #cfcfcf; }
.pit-mini-index #recently::-webkit-scrollbar-thumb:hover { background: #111; }
/* --- end patch --- */

.pit-mini-index #recently { /* fallback values (kept for visual parity) */ }
.pit-mini-index li{ margin:0; padding:0.4375rem 0; border-bottom:0.125rem dashed #6a6a6a; }

/* Icon grid / links */
.icon-grid{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(4.625rem, 1fr));
  gap: 0.625rem 0.75rem;
  place-items:center;
  align-content:center;
  justify-items:center;
  max-width:22.5rem;
  margin:0 auto;
}
.pit-link{
  width:4.25rem;
  height:4.25rem;
  display:grid;
  place-items:center;
  background:#efefef;
  border:var(--stroke) solid var(--line);
  border-radius:0.625rem;
  box-shadow:0.25rem 0.25rem 0 var(--shadow-color);
  filter:brightness(1.18);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.pit-link img{ width:3.5rem; height:3.5rem; object-fit:contain; box-shadow:none !important; }
.pit-buttons:hover .pit-link { transform:scale(.93); filter:brightness(.72); }
.pit-buttons .pit-link:hover { transform:scale(1.10); filter:brightness(1.18); box-shadow:0.375rem 0.375rem 0 rgba(0,0,0,.52); z-index:2; }

/* Intro gallery (uses gallery variables) */
#description{
  display:block;
  width:auto;
  max-width:none;
  margin:0.75rem 0 0;
  padding:0.5rem 0.75rem;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  z-index:1;
}
#description .intro-gallery{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  gap:0.75rem;
  width:100%;
  height: var(--gallery-height);
  max-height: var(--gallery-height);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  white-space:nowrap;
  padding:0.25rem 0.625rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior:contain;
  cursor:grab;
  user-select:none;
}
#description .intro-gallery.is-dragging{ cursor:grabbing; }
#description .intro-gallery::-webkit-scrollbar{ display:none; }
#description .intro-gallery > a{ flex:0 0 auto; display:flex; align-items:center; height:100%; line-height:0; }
#description .intro-gallery > a > img{
  display:block;
  width:auto;
  height:100%;
  object-fit:contain;
  object-position:center;
  border:var(--stroke) solid var(--line);
  border-radius:0.125rem;
  box-shadow:0.25rem 0.25rem 0 var(--shadow-color);
}

/* Desktop: nudge gallery slightly so it doesn't touch the profile and let it expand */
@media (min-width:981px) {
  #description{
    margin-left: calc(-1 * (var(--profile-width) + var(--topbar-gap) - 0.5rem)); /* small gap to profile */
    width: calc(100% + var(--profile-width));
    max-width: none;
    padding-right: calc(var(--badge-width) + 0.5rem);
    box-sizing: border-box;
    overflow: visible;
  }
  #description .intro-gallery{ height: var(--gallery-height-lg); max-height: var(--gallery-height-lg); }
}

/* Date/post styles */
.date-header{
  margin:1.625rem 0 0.625rem;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1f2937;
  font-weight: 700;
}
.post{
  margin:0 0 1.375rem;
  padding:1rem 1.125rem 0.75rem;
  transition: transform .16s ease, box-shadow .16s ease;
}
.post:hover{ transform: translateY(-2px); box-shadow: 8px 8px 0 var(--shadow-color-post-hover); }
.post-meta-top{ display:flex; align-items:center; justify-content:space-between; margin:0 0 0.5rem; }
.post-meta-top em{ font-style:normal; color:#222; font-size:.92rem; }
.post-title{
  margin:0 0 0.5rem;
  padding:0 0 0.5rem;
  border-bottom:0.125rem solid #666;
  font-size:2rem;
  line-height:1.2;
  font-weight:800;
}
.post-body{ padding:0; }
.post p{ margin:0 0 .85em; color:#111; }
.post .pdf-embed{ width:100%; height:45rem; border:0.1875rem solid #2a2a2a; background:#fff; }
.post video{ width:100%; max-width:56.25rem; height:auto; display:block; border:0.1875rem solid #2a2a2a; background:#000; }
a.comment-link{
  color:#fff !important;
  background:var(--accent);
  border:var(--stroke) solid var(--line);
  border-radius:0.125rem;
  padding:0.25rem 0.5rem;
  box-shadow:0.1875rem 0.1875rem 0 var(--shadow-color);
  text-decoration:none !important;
}
a.comment-link:hover{ background:var(--accent-2); }

/* Comments */
.comments{ margin:0.5rem 0 0; padding:0; background:transparent !important; border:0 !important; box-shadow:none !important; }
.comment-body{ margin:0; padding:0.25rem 0; font-size:.92rem; line-height:1.45; border-top:0.0625rem solid rgba(42,42,42,.22); background:transparent; }
.comment-body p{ margin:0; }
.comment-body small{ color:#000; font-size:.86em; }
.post .comments:last-child{ margin-bottom:0.125rem; }

/* Profile image block & text */
/* Image is limited to 140px high; the text area is constrained to the leftover space to avoid scrollbars. */
.profile-datablock{ display:block; text-align:center; width:100%; }
.profile-img{ display:flex; align-items:center; justify-content:center; width:100%; }
.profile-img img{
  display:block;
  margin:0 auto;
  height:auto !important;
  width:auto !important;
  max-height: 140px; /* PER YOUR REQUEST: at least 140px visual cap */
  max-width: 100% !important;
  object-fit: cover;
  border: var(--stroke) solid var(--line) !important;
  border-radius: 0.125rem !important;
  box-shadow: 0.25rem 0.25rem 0 var(--shadow-color);
}

/* Constrain the profile text area so the whole card never exceeds the banner height.
   If you change image size, adjust the 140px value above or this calc accordingly. */
.profile-textblock{
  margin: 0;
  padding: 0;
  font-size: 0.86rem; /* slightly smaller so text fits */
  line-height: 1.25;
  color: #111;
  text-align: center;
  max-width: 100%;
  /* reserve space: panel height minus image height (140px) minus a small gap (1rem) */
  max-height: calc(var(--panel-height) - 140px - 1rem);
  overflow: hidden; /* prevent scrollbars */
  box-sizing: border-box;
}

/* Post images */
.post img{ max-width:100%; height:auto; border:var(--stroke) solid var(--line); border-radius:0.125rem; box-shadow:0.25rem 0.25rem 0 var(--shadow-color); }

/* Footer */
#footer-stack{ margin:1.5rem auto 0; width:fit-content; max-width:calc(100% - 1.25rem); }
#footer-visitors{ margin:0 auto 0.5rem; padding:0.5rem 0.875rem; width:fit-content; max-width:100%; }
#footer-visitors p{ margin:0; white-space:nowrap; text-align:center; color:#1f2937; }
#footer{ clear:both; margin:0 auto; padding:0.5rem 0.875rem; width:fit-content; max-width:100%; }
#footer div,#footer div div{ background:none; padding:0; }
#footer hr{ display:none; }
#footer p{ margin:0; text-align:center; color:#1f2937; white-space:nowrap; }
#footer a{ color:#1f2937; }

/* Main + badges layout */
#content-row{ display:flex; align-items:flex-start; gap:0.875rem; margin-top:-15.3125rem; }
#main{ flex:1 1 auto; width:auto; margin:0; padding:0; padding-top:15.3125rem; }
#main2,#main3{ float:none; width:100%; padding:0; }
#sidebar{ display:none; }

/* Badges rail - kept exactly as you had it (beveled look, no shadow), vertical start controlled by --badge-rail-start */
#badges-rail{
  flex:0 0 var(--badge-width);
  width:var(--badge-width);
  padding:0.5rem 0.375rem 0.625rem;
  margin-top: var(--badge-rail-start); /* controlled by --badge-rail-start in :root */
  position: sticky;
  top: 0;
  transform: none;
  max-height: calc(100vh - 1.25rem);
  overflow: auto;

  background: linear-gradient(#e6e6e6, #cfcfcf) !important;
  border: 0.125rem solid #000 !important;
  border-top-color: #ffffff !important;
  border-left-color: #ffffff !important;
  border-right-color: #404040 !important;
  border-bottom-color: #404040 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  font-family: "MS Sans Serif","Tahoma","Verdana",sans-serif;
  z-index: 3;
}
#badges-rail::before{
  content:"webBadge-uri";
  display:block;
  margin:0 0 0.5rem;
  padding:0.125rem 0.375rem 0.1875rem;
  color:#fff;
  font-size:0.6875rem;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.2px;
  background:#000080;
  border:0.0625rem solid #ffffff;
  border-right-color:#404040;
  border-bottom-color:#404040;
}
.secondary-page #badges-rail{ position:relative; top:auto; max-height:none; align-self:flex-start; }
.web-badge{
  display:block;
  width:6.25rem;
  margin:0 auto 0.5rem;
  padding:0.1875rem;
  background:#c0c0c0;
  border:0.125rem solid #000;
  border-top-color:#808080;
  border-left-color:#808080;
  border-right-color:#ffffff;
  border-bottom-color:#ffffff;
  transition: transform .06s ease, border-color .06s ease;
  box-shadow: none !important;
}
.web-badge img{
  display:block;
  width:5.5rem;
  height:1.9375rem;
  margin:0 auto;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border:0.0625rem solid #000;
  box-shadow:none !important;
}
.web-badge:hover{
  border-top-color:#404040;
  border-left-color:#404040;
  border-right-color:#ffffff;
  border-bottom-color:#ffffff;
  transform:translate(1px,1px);
}
.web-badge:active{
  border-top-color:#202020;
  border-left-color:#202020;
  border-right-color:#dcdcdc;
  border-bottom-color:#dcdcdc;
  transform:translate(1px,1px);
}

/* Responsive tweaks */
@media (max-width:980px){
  body#body, #body { padding: 1.125rem 0.625rem; }

  /* stack topbar */
  #topbar { display:block; margin:0 0 0.875rem; }
  #topbar #profile-container {
    width:100%;
    flex:none;
    margin:0 0 0.75rem;
    min-height: auto;
    justify-content: flex-start;
    padding: 0.5rem;
    z-index: 3;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  #link-pit{ height:auto; min-height:20rem; grid-template-columns:1fr; }
  .pit-buttons{ border-left:0; border-top:0.1875rem solid #555; }

  #content-row{ display:block; margin-top:0; }
  #main{ padding-top:0; }

  #badges-rail{
    position: static;
    transform: none;
    width: 100%;
    max-height: none;
    margin: 0 0 0.875rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    flex: 1 1 auto;
    z-index: 2;
    box-shadow: none;
    background: #c0c0c0 !important;
    border: 0.125rem solid #000;
  }
  .secondary-page #badges-rail{ position: static; transform: none; }

  #badges-rail::before{ max-width:13.75rem; margin:0 auto 0.5rem; text-align:left; }
  .web-badge{ margin: 0; }

  #blog-title{ font-size:1.6rem; gap:0.5rem; }
  #blog-title .title-nav{ gap:0.5rem; }
  #blog-title .title-nav a{ min-height:2.5rem; min-width:2.5rem; padding:0.1875rem; }
  #blog-title .title-nav a.icon-nav img{ width:2rem; height:2rem; }

  .post-title{ font-size:1.5rem; }

  .icon-grid{ max-width:22.5rem; grid-template-columns:repeat(3, minmax(4rem, 1fr)); }
  .pit-link{ width:4rem; height:4rem; }
  .pit-link img{ width:3.25rem; height:3.25rem; }

  /* Cancel left-shift on small screens */
  #description{ margin-left: 0 !important; max-width: none !important; padding-right: 0.75rem !important; overflow: hidden; }
  #description .intro-gallery{ height: var(--gallery-height); max-height: var(--gallery-height); }

  #footer-stack{ width:auto; max-width:100%; }
}

/* Math / code containment fixes
   Add these rules (append to your blog.css or include this file) to prevent
   MathJax/KaTeX output, <pre> blocks and inline math from forcing the page
   wider than the content column.
*/

/* Make sure main content containers never overflow their parent */
#content, #main, .post, article, #link-pit {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Make code blocks wrap instead of forcing horizontal width.
   This preserves code semantics while preventing layout breakage.
*/
pre, code, kbd, samp {
  box-sizing: border-box;
  max-width: 100%;
  white-space: pre-wrap;            /* wrap long lines */
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* MathJax v3 / v2 and KaTeX safety:
   - Keep inline math inline but limit width.
   - Ensure display math is block-level and scrolls horizontally if too wide,
     rather than expanding the full page width.
   - Scale SVG output so it never exceeds its container.
*/

/* Generic container for display math (MathJax/KaTeX) */
.MathJax, .MathJax_Display, .MathJax_SVG_Display,
.mjx-chtml, .mjx-svg, .katex {
  box-sizing: border-box;
  max-width: 100%;
}

/* Inline math: keep it inline but prevent overflow */
.MathJax_inline,
.MathJax .mjx-chtml,
.katex {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  word-break: normal;  /* allow natural breaks inside surrounding text */
}

/* SVGs generated by MathJax: constrain to container width and preserve aspect ratio */
.MathJax_SVG svg,
.mjx-svg svg,
.katex svg {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
  display: inline-block;
}

/* Display math: make block-level, center, but allow horizontal scroll instead of expanding layout */
.MathJax_Display, .MathJax_SVG_Display, .mjx-display, .katex-display {
  display: block;
  margin: 0.5rem auto;
  max-width: 100%;
  overflow-x: auto;                      /* horizontal scroll only when needed */
  -webkit-overflow-scrolling: touch;     /* smooth scrolling on mobile */
}

/* If your posts use <pre> to show TeX source, prevent that from widening the page */
pre.math, pre.mathjax, pre.katex {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Force long URLs and unbroken content inside posts to wrap */
.post img, .post svg, .post iframe, .post embed {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* Optional: provide a visual container class you can wrap wide equations in
   if you want a subtle border with a horizontal scroller. Use in post HTML:
   <div class="math-wrap"> ... display math ... </div>
*/
.math-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;  /* small breathing room */
}

/* Fallback for very old browsers: ensure overflow-x does not create layout blowout */
@media all and (max-width: 3200px) {
  .MathJax, .mjx-svg, .katex, pre {
    min-width: 0;
  }
}

/* Clock doubling */
.clock-dyn {
  font-size: 2em;
}