/* ====== Base & Typography ====== */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
html, body {
  margin: 0;
  padding: 0;
}
body.two {
  /* Dark background already set inline; enforce good contrast & type scale */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height: 1.6;
  font-size: 16px;              /* mobile base */
  color: #222;                  /* text on white sections */
  background-color: #303030;    /* matches your inline bgcolor */
}
@media (min-width: 420px) {
  body.two { font-size: 17px; }
}
@media (min-width: 768px) {
  body.two { font-size: 18px; }
}

/* Ensure main white-paper areas are truly white and readable */
td[background*="background_paper_12.jpg"],
td[bgcolor="#FFFFFF"],
td[background*="yellow_bar_top_230"], 
td[background*="yellow_bar_230"] {
  background-color: #fff !important;
}

/* Remove cramped old-school spacing */
img[src*="spacer.gif"] { display: none !important; }

/* ====== Layout: convert two-columns to responsive ====== */
/* The outer most table appears to have three tds: [main] [gutter] [sidebar] */
/* Stack on small screens; align nicely on larger ones */
table[align="center"][cellpadding="0"][cellspacing="0"] { width: 100% !important; }

/* Main content cell (first column) */
td[valign="top"] > table[align="center"] { width: 100% !important; }

/* Constrain overall readable width on large screens */
body.two > table { max-width: 1080px; width: 100% !important; }

/* Gutter (the 22px spacer between columns) */
td > img[width="22"][height="1"] { display: none !important; }

/* Sidebar column becomes full width under main on small screens */
@media (max-width: 980px) {
  /* Stack: turn table “columns” into blocks */
  body.two > table > tbody > tr > td { display: block; width: 100% !important; }
  /* Give the sidebar some separation when stacked */
  body.two > table > tbody > tr > td:last-child { margin-top: 1.25rem; }
}

/* ====== Images & media ====== */
img { max-width: 100%; height: auto; }
.youtube-container { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; }
.youtube-container iframe,
.youtube-player {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0;
}

/* ====== Headings & text spacing ====== */
h1, h2 {
  line-height: 1.25;
  margin: 1.25em 0 0.5em;
}

.main-column h1 {font-size: 1.75em}
.main-column h2 {font-size: 1.4em;}

p { margin: 0.75em 0; }

/* Improve contrast of light-on-dark links you style inline */
a { color: #0b63bd; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* ====== Top nav ====== */
.menubar2 {
  margin: 0;
  padding-top:0.3rem;
  padding-bottom:0.2rem;
  padding-left:0.3rem;
  background: #383030;   /* already in markup; keep it */
  color: #fff;
  text-align: left;
}
a.menubar {
  color: #ffe9c6; 
  padding: 0.0rem 0.0rem;
  display: inline-block;
  font-size: 120%;
}
a.menubar:hover, a.menubar:focus { color: #fff; text-decoration: underline; }

/* ====== Search box ====== */
.searchBox {
  width: min(520px, 70vw);
  padding: 0.5rem 0.6rem;
  border: 1px solid #bbb;
  border-radius: 6px;
  font-size: 1rem;
}
@media (max-width: 520px) {
  #headernavtop { width: 100% !important; }
  .searchBox { width: 100%; }
}

/* ====== “feature blocks” (your image + text two-cell tables) ====== */
/* Make those 2-col rows collapse to vertical on mobile */
table[width="100%"][cellpadding="0"][cellspacing="0"] > tbody > tr {
  display: grid;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 700px) {
  table[width="100%"][cellpadding="0"][cellspacing="0"] > tbody > tr {
    grid-template-columns: 1fr;
  }
  /* kill the tiny 17px left-padding cells */
  td > img[width="17"] { display: none !important; }
}

/* ====== Right-column link lists ====== */
.rcol_links, a.rcol_links {
  display: block;
  margin: 0.3rem 0;
  color: #2a2a2a;
}
.rcol { margin: 1rem 0; }

/* ====== Keyword cloud at bottom ====== */
.keywords a.keywords {
  
  text-decoration: none;
  border-bottom: 1px dotted #a0aec0;
}
.keywords a.keywords:hover { text-decoration: underline; }

/* ====== Footer fine print ====== */
p.date {
  color: #6b7280 !important;
  font-size: 0.85rem !important;
}

/* ====== Accessibility touch-ups ====== */
:focus { outline: 2px solid #2563eb; outline-offset: 2px; }
img[alt=""] { outline: 2px dashed #f59e0b; } /* debug helper for missing alts; remove later */

/* 1) No padding on the outer page; let the wood go edge-to-edge */
body.two > table { padding-left: 0 !important; padding-right: 0 !important; }

/* 2) Add left/right gutters *on the parchment cells only* */
td[background*="background_paper_12.jpg"] {
  padding-left: clamp(12px, 4vw, 28px);
  padding-right: clamp(12px, 4vw, 28px);
}

/* (Optional) If some sections use plain white instead of the parchment image
   and you want the same gutters there too, uncomment this:
td[bgcolor="#FFFFFF"] {
  padding-left: clamp(12px, 4vw, 28px);
  padding-right: clamp(12px, 4vw, 28px);
}
*/

/* 3) Make images respect the new gutters */
img { max-width: 100%; height: auto; display: block; }

/* 4) Keep the little yellow “cap” bars flush (no extra padding there) */
td[background*="yellow_bar_top_230_feb2017.png"],
td[background*="yellow_bar_230_feb2017.png"],
td[background*="yellow_bar_feb2017.png"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Main content (left parchment column) */
td[background*="background_paper_12.jpg"][valign="top"],
td[bgcolor="#FFFFFF"][valign="top"] {
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
  background-color: #fffef8; /* fallback parchment tone */
}

/* Sidebar parchment column */
td[background*="background_paper_12.jpg"]:not([valign="top"]),
td[background*="yellow_bar_top_230_feb2017.png"] + tr td[background*="background_paper_12.jpg"] {
  padding-left: clamp(12px, 2vw, 24px);
  padding-right: clamp(12px, 2vw, 24px);
  background-color: #fffef8;
}

/* Transparent gutter between columns */
body.two > table > tbody > tr > td > img[width="22"][height="1"],
body.two > table > tbody > tr > td:nth-child(2) {
  background: transparent !important;
  width: 22px !important;    /* keep wood showing through */
}

/* Main content parchment cell */
td[valign="top"][background*="background_paper_12.jpg"],
td[valign="top"][bgcolor="#FFFFFF"] {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-top-left-radius: 0;   /* keep top square */
  border-top-right-radius: 0;
  overflow: hidden;
  background-color: #fffef8;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}


/* Round sidebar parchment column */
td[background*="background_paper_12.jpg"]:not([valign="top"]),
td[bgcolor="#FFFFFF"]:not([valign="top"]) {
  border-radius: 12px;
  overflow: hidden;
  background-color: #fffef8;
}

/* Optional: add subtle shadow to lift columns off the wood */
td[background*="background_paper_12.jpg"],
td[bgcolor="#FFFFFF"] {
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Main column container (banner + parchment together) */
body.two > table > tbody > tr > td:first-child {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Sidebar (right column) parchment: tighter left/right padding */
body.two > table > tbody > tr > td:last-child td[background*="background_paper_12.jpg"],
body.two > table > tbody > tr > td:last-child td[bgcolor="#FFFFFF"] {
  padding-left: clamp(6px, 1.5vw, 14px) !important;
  padding-right: clamp(6px, 1.5vw, 14px) !important;
}

/* Add vertical breathing room above the sidebar box */
body.two > table > tbody > tr > td:last-child {
  padding-top: 11px; /* whatever your spacer height was */
}

/* Sidebar parchment rounded all around */
body.two > table > tbody > tr > td:last-child
  td[background*="background_paper_12.jpg"],
body.two > table > tbody > tr > td:last-child
  td[bgcolor="#FFFFFF"] {
  border-radius: 12px;
  overflow: hidden;
  background-color: #fffef8;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}


/* Sidebar parchment: add inner breathing room */
body.two > table > tbody > tr > td:last-child
  td[background*="background_paper_12.jpg"],
body.two > table > tbody > tr > td:last-child
  td[bgcolor="#FFFFFF"] {
  padding: 6px 8px; /* top/bottom 12px, sides 14px */
}


img.keep-spacer { display: block !important; width: 1px; height: 20px; }


.main-column {
  max-width: 720px;   /* or whatever you want for your parchment width */
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;   /* ensures banner & parchment share the rounded top */
}

.banner-img {
  display: block;
  width: 100%;        /* scales to exactly match .main-column width */
  height: auto;       /* preserves aspect ratio */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}


.top-widgets {
  text-align: center;     /* old-school centering */
  margin: 0.5em 0 1em;    /* some breathing space */
}

.top-widgets img,
.top-widgets form {
  display: inline-block;  /* make them flow horizontally */
  vertical-align: middle; /* align search box with the icon */
  margin: 0 8px;
}


/* 1) Don’t force grayscale anti-aliasing (can look softer) */
html, body {
  -webkit-font-smoothing: auto;   /* was sometimes set to 'antialiased' */
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeSpeed;   /* avoid heavy shaping unless you need it */
}

/* 2) Make sure we’re not using fake bold/weights (causes blur) */
body { font-weight: 400; }
h1, h2, h3, strong, b { font-weight: 700; }  /* only if your font has 700 */

/* 3) Avoid fractional transforms that blur text layers */
.main-column, .sidebar, body, html {
  transform: none !important;
  will-change: auto !important;
  filter: none !important;
  opacity: 1 !important;           /* text gets blurry if an ancestor has opacity < 1 */
}

/* 4) Snap typography to clean sizes */
body.two { font-size: 17px; line-height: 1.6; }         /* whole-pixel base */
.main-column h1 { font-size: 28px; line-height: 1.2; font-weight: 200; }  /* adjust to taste */
.main-column h2 { font-size: 22px; line-height: 1.25; font-weight: 200;}

/* 5) Avoid sub-pixel layout for the main column (keeps glyphs crisper) */
.main-column { width: 650px; }       /* or 680/720 – pick a whole-pixel number */
@media (max-width: 720px) { .main-column { width: auto; } }  /* mobile can be fluid */

/***********************************/


/* === Legacy feature rows: keep them as real table rows === */
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] {
  border-collapse: collapse;
  width: 100%;
}
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td {
  vertical-align: top;
}

/* 1) Hide spacer GIFs inside these tables so spacer <td>s collapse */
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] img[src*="spacer.gif"] {
  display: none !important;
}

/* 2) Make images behave and not float weirdly */
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td img {
  display: block;
  max-width: 100%;
  height: auto;
  float: none !important;  /* neutralize old align=right/left effects */
  border: 0;
}

/* 3) Add a gap between the image cell and the text cell
   - Prefer padding on the image cell if we can detect it
   - Fallback to margin on the image itself if :has() isn't supported
*/

/* (modern) pad the <td> that contains a ~250–276px feature image */
@supports(selector(td:has(img))) {
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td:has(img[width="276"]),
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td:has(img[width="250"]) {
    padding-right: 16px;
  }
}

/* (fallback) add some right margin on the feature images themselves */
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td img[width="276"],
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td img[width="250"] {
  margin-right: 16px;
}

/* 4) Stack on phones */
@media (max-width: 700px) {
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] tr { display: block; }
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] tr td { 
    display: block; width: 100% !important;
  }
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] tr td + td { margin-top: 12px; }
}


/* 0) OPTIONAL: tag these feature tables for safer targeting */
.main-column table.feature { /* nothing here; just a hook */ }

/* 1) Desktop/tablet: force real table layout (side-by-side) */
@media (min-width: 601px) {
  /* Use the class if you can add it; otherwise use the attribute pattern */
  .main-column table.feature tr,
  .main-column table[width="100%"][border="0"][cellpadding="0"][cellspacing="0"] tr {
    display: table-row !important;
  }
  .main-column table.feature td,
  .main-column table[width="100%"][border="0"][cellpadding="0"][cellspacing="0"] td {
    display: table-cell !important;
    width: auto !important;
    vertical-align: top;
  }
}

/* 2) Hide only REAL spacer cells (don’t hide by position) */
.main-column table.feature td:has(img[src*="spacer.gif"]),
.main-column table[width="100%"][border="0"][cellpadding="0"][cellspacing="0"] td:has(img[src*="spacer.gif"]) {
  
}

/* 3) Make the image behave; add a gap to its right */
.main-column table.feature td img,
.main-column table[width="100%"][border="0"][cellpadding="0"][cellspacing="0"] td img {
  display: block;
  max-width: 100%;
  height: auto;
  float: none !important;   /* neutralize align="right" etc. */
  border: 0;
}

/* give common 250–276px feature images some right margin on desktop */
@media (min-width: 601px) {
  .main-column table.feature td img[width="276"],
  .main-column table.feature td img[width="250"],
  .main-column table[width="100%"][border="0"][cellpadding="0"][cellspacing="0"] td img[width="276"],
  .main-column table[width="100%"][border="0"][cellpadding="0"][cellspacing="0"] td img[width="250"] {
    margin-right: 16px;
  }
}

/* 4) Phones only: stack vertically */
@media (max-width: 600px) {
  .main-column table.feature tr,
  .main-column table[width="100%"][border="0"][cellpadding="0"][cellspacing="0"] tr { 
    display: block; 
  }
  .main-column table.feature td,
  .main-column table[width="100%"][border="0"][cellpadding="0"][cellspacing="0"] td { 
    display: block; 
    width: 100% !important; 
  }
  .main-column table.feature td + td,
  .main-column table[width="100%"][border="0"][cellpadding="0"][cellspacing="0"] td + td {
    margin-top: 12px;
  }
}

/* 1) Never hide the whole cell just because it has a spacer gif */
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td:has(img[src*="spacer.gif"]) {
  display: table-cell !important;  /* undo the previous rule */
}

/* Hide just the spacer gifs */
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] img[src*="spacer.gif"] {
  display: none !important;
}

/* 2) (Optional) If a TD truly contains *only* spacer gifs (no links, no real images),
   then hide that TD to collapse the empty column */
@supports(selector(td:has(img))) {
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td
  :is(:has(> img[src*="spacer.gif"]:only-child)):not(:has(> a), :has(> img:not([src*="spacer.gif"]))) {
    display: none !important;
  }
}

/* Keep desktop side-by-side; only stack on phones */
@media (min-width: 601px) {
  .main-column table[width="100%"][border="0"][cellpadding="0"][cellspacing="0"] tr {
    display: table-row !important;
  }
  .main-column table[width="100%"][border="0"][cellpadding="0"][cellspacing="0"] td {
    display: table-cell !important;
    vertical-align: top;
    width: auto !important;
  }
}

/* Tidy images and add a little gap */
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td img {
  display: block;
  max-width: 100%;
  height: auto;
  float: none !important;
  border: 0;
  margin-right: 16px; /* gives space between image and text */
}

/* Phones: stack */
@media (max-width: 600px) {
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] tr { display: block; }
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td { display: block; width: 100% !important; }
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td + td { margin-top: 12px; }
}

/* ---------- HOME/feature rows: SAFE RESET ---------- */

/* Desktop/tablet: use real table layout again */
@media (min-width: 601px) {
  .main-column table[width="100%"][border="0"][cellpadding="0"][cellspacing="0"] > tbody > tr {
    display: table-row !important;
  }
  .main-column table[width="100%"][border="0"][cellpadding="0"][cellspacing="0"] > tbody > tr > td {
    display: table-cell !important;
    vertical-align: top;
    width: auto !important;
    visibility: visible !important;
  }
}

/* CRITICAL: never hide a TD; hide only spacer gifs */
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] img[src*="spacer.gif"] {
  display: none !important;
}

/* Make sure real images show */
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td a img,
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td > img:not([src*="spacer.gif"]) {
  display: block !important;
  max-width: 100%;
  height: auto !important;
  opacity: 1 !important;
  float: none !important; /* neutralize align="right/left" */
  border: 0;
}

/* Add a bit of gap to the right of typical feature thumbs */
@media (min-width: 601px) {
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td a img[width="276"],
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td a img[width="250"] {
    margin-right: 16px;
  }
}



/* Bigger homepage “feature” images on desktop/tablet */
@media (min-width: 701px) {
  /* common 250–276px thumbs → enlarge to ~340px */
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td a img[width="276"],
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td > img[width="276"],
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td a img[width="250"],
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td > img[width="250"] {
    width: 740px;    /* try 340–360px; adjust to taste */
    height: auto;    /* preserve aspect ratio */
  }
}

/* Keep images fluid on phones */
@media (max-width: 600px) {
 /* common 250–276px thumbs → enlarge to ~340px */
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td a img[width="276"],
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td > img[width="276"],
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td a img[width="250"],
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td > img[width="250"] {     
       min-width: 440px;    /* try 340–360px; adjust to taste */

    height: auto;
  }
}

/* Between 601–900px keep two columns, but protect the image width */
@media (min-width: 601px) and (max-width: 900px) {
  /* Modern selector that works in current Chrome/Edge/Safari/Firefox */
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td:has(img:not([src*="spacer.gif"])) {
    min-width: 220px;  /* adjust to taste (200–260px works well) */
  }

  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td img:not([src*="spacer.gif"]) {
    width: 100%;       /* fill that protected cell */
    height: auto;
  }
}



















/* Sidebar text rows: keep anchor tags inline */
body.two > table > tbody > tr > td:last-child p.rcol_links > a.rcol_links {
  display: inline !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important; /* was: break-all/anywhere? */
  width: auto !important;           /* undo any 100% widths */
  margin: 0 .1em 0 0;               /* tiny space before commas if needed */
}

/* And the paragraph itself should NOT be flex */
body.two > table > tbody > tr > td:last-child p.rcol_links {
  display: block !important;
  white-space: normal !important;
}





/* Restore old pattern: image floats right, text wraps */
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td img[align="right"] {
  float: right !important;
  display: block;              /* a floated block is fine */
  margin-left: 15px;           /* you already had this inline */
  margin-bottom: 8px;
  height: auto;
  max-width: none;             /* don't let global img {max-width:100%} shrink it */
}

/* On small screens, stack and center the image so it doesn't cramp text */
@media (max-width: 700px) {
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td img[align="right"] {
    float: none !important;
    display: block;
    margin: 0 auto 12px;
    max-width: 100%;           /* allow it to shrink on phones */
    height: auto;
  }
}

/* Site-wide book cover height cap (tweak as you like) */
:root { --book-cover-max-h: 300px; }

/* BOOK COVERS ONLY = files under images/books/ */
.main-column td img[src^="images/books/"],
.main-column td a img[src^="images/books/"] {
  height: auto !important;                 /* ignore any HTML height/width */
  max-height: var(--book-cover-max-h) !important;
  width: auto !important;                  /* scale by height cap */
  max-width: none !important;              /* don't get constrained by generic rules */
}

/* Keep the classic float/right layout for book covers only */
.main-column td img[src^="images/books/"][align="right"] {
  float: right !important;
  display: block;
  margin-left: 15px;
  margin-bottom: 8px;
}

.main-column td img[src^="images/books/"][align="left"] {
  float: left !important;
  display: block;
  margin-right: 15px;
  margin-bottom: 8px;
}

/* Phones: stack/center book covers; still respect height cap */
@media (max-width: 700px) {
  .main-column td img[src^="images/books/"] {
    float: none !important;
    display: block;
    margin: 0 auto 12px;
    max-width: 100% !important;
    width: auto !important;
    max-height: var(--book-cover-max-h) !important;
  }
}



/* ---- hd_logo: keep icon-sized next to text ---- */
:root { --hd-icon-size: 1.1em; }   /* tweak: 1.0–1.2em usually looks right */

.main-column img.hd_logo,
.main-column img[src$="hd_logo.jpg"] {
  height: var(--hd-icon-size) !important;  /* scale with font */
  width: auto !important;                  /* preserve aspect */
  max-width: none !important;              /* ignore global img {max-width:100%} */
  display: inline !important;              /* don't turn into block */
  float: none !important;                  /* never float */
  vertical-align: text-bottom;             /* align nicely with text */
  margin: 0 0 0 .3em;                      /* small gap before icon */
}

/* Exclude hd_logo from any generic scaling applied to feature/table images */
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"] td img:not(.hd_logo) {
  /* your existing responsive rules can stay; this selector prevents hd_logo from matching them */
}

/* If you have rules like this somewhere, add :not(.hd_logo) to them: */
/*
.main-column table[...] td img:not([src*="spacer.gif"]):not(.hd_logo) { ... }
.main-column table[...] td a img[width="276"]:not(.hd_logo) { ... }
@media (max-width:900px) {
  .main-column table[...] td img:not([src*="spacer.gif"]):not(.hd_logo) { width: min(100%, 420px) !important; }
}
*/

:root { --caution-size: 1.7em; } /* tweak to 1.8em / 2.2em if needed */

.main-column img.icon_caution {
  height: var(--caution-size) !important; /* key: size by height */
  width: auto !important;                 /* keep aspect ratio */
  max-width: none !important;             /* ignore global img{max-width:100%} */
  display: inline-block !important;
  vertical-align: text-bottom;            /* lines up nicely with text */
  margin: 0 .25em 0 .25em;                /* tiny breathing room */
}



/* Apply only when the table row does NOT have a “Read More” link (i.e., not homepage features) */
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"]
  > tbody > tr:not(:has(a.more-link)) td a img[src^="images/frogs/"],
  .main-column table[width="100%"][cellpadding="0"][cellspacing="0"]
  > tbody > tr:not(:has(a.more-link)) td a img[src^="images/reptiles/"],
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"]
  > tbody > tr:not(:has(a.more-link)) td a img[src^="images/birds/"],
.main-column table[width="100%"][cellpadding="0"][cellspacing="0"]
  > tbody > tr:not(:has(a.more-link)) td a img[src^="images/mammals/"] {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}


/* Inline icon defaults (applies to images named like icon_*.png/jpg) */
:root { --inline-icon-size: 1.1em; } /* tweak to taste */

img[class^="icon_"]:not(.icon_caution):not(.hd_logo),
img[class*=" icon_"]:not(.icon_caution):not(.hd_logo),
img[src*="/icon_"]:not(.icon_caution):not(.hd_logo) {
  display: inline !important;        /* stop becoming block */
  float: none !important;            /* never float */
  vertical-align: text-bottom;       /* sit nicely with text */
  height: var(--inline-icon-size) !important;  /* scale with font */
  width: auto !important;            /* keep aspect */
  max-width: none !important;        /* ignore global max-width:100% */
  margin: 0 .25em 0 .25em !important;/* tiny side gap, kill negative margins */
}

/* You already asked for bigger caution icon (keep it) */
img.icon_caution {
  height: 2em !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: text-bottom;
}

/* Keep hd_logo small like text (from earlier) */
img.hd_logo,
img[src$="hd_logo.jpg"] {
  height: 1.1em !important;
  width: auto !important;
  display: inline !important;
  vertical-align: text-bottom;
  max-width: none !important;
}


/* Inline heading icons (e.g., fish_140.png, redback_120.png, dragon/frog icons) */
:root { --heading-icon-size: 1.2em; } /* tweak: 1.1–1.4em */

.main-column h1 img:not(.banner-img),
.main-column h2 img:not(.banner-img),
.main-column h3 img:not(.banner-img) {
  display: inline !important;       /* stop block layout */
  float: none !important;           /* never float in headings */
  vertical-align: text-bottom;      /* sit nicely with text */
  height: var(--heading-icon-size) !important;  /* scale with font */
  width: auto !important;           /* keep aspect ratio */
  max-width: none !important;       /* ignore global max-width:100% */
  margin: 0 .25em 0 .15em !important; /* small side gap, kill inline negatives */
}

/* (optional) give headings a touch more line height so the icon doesn't feel cramped */
.main-column h1, .main-column h2, .main-column h3 {
  line-height: 1.2;
}