.background {
	background-color: #FFFFFF;
	background-image: url(/assets/background.gif);
	margin: 0px;
	padding: 0px;

}
.bigtable {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	left: 0px;
	top: 0px;
	width: 802px;

}
.rightfade {
	background-color: #FFFFFF;
	background-image: url(/assets/background-fade.gif);
	width: 32px;

}
.bodytable {
	background-color: #FFFFFF;
	width: 770px;
	padding: 0px;
	left: 0px;
	top: 0px;
	vertical-align: top;


}
.content {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #000000;
	background-color: #FFFFFF;
	text-align: left;
	vertical-align: top;
	width: 770px;
	margin: 0px;
	padding: 0px;

}
.header {
	background-color: #CCCCCC;
	background-image: url(/assets/logo.jpg);
	height: 71px;
	width: 770px;
}
.topbar {
	background-color: #95192d;
}
.topnav {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #4d4d4d;
	background-image: url(/assets/nav-bg.gif);
	width: 770px;
	vertical-align: top;
	height: 29px;
	top: 0px;


}
.topnavlinkright {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #4d4d4d;
	background-image: none;
	vertical-align: top;
	text-align: right;
	right: 0px;
	padding-top: 5px;
	margin-top: 5px;




}
.topnavlink {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #4d4d4d;
	background-image: none;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	padding-right: 3px;
	padding-left: 3px;



}
.slogan {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #95192d;
	vertical-align: middle;
	height: 23px;
	width: 770px;
	padding-left: 6px;
}
.featurecell {
	background-color: #FFFFFF;
	height: 360px;
	width: 770px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #95192d;

}
.frontphoto {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	height: 309px;
	width: 212px;
	margin-right: 10px;
	margin-left: 10px;
	left: 0px;
	position: absolute;



}
.fronttext {
	height: 309px;
	left: 212px;
	top: 0px;
	position: relative;
	overflow: auto;
	width: 318px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #000000;





}
.headline {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #95192d;
	text-align: left;
}
.subhead {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #4d4d4d;
	text-align: left;
}
.byline {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #666666;
	padding-top: 10px;
}
.frontstory {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	padding-right: 10px;
}
.boldlink {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #95192d;
	text-decoration: none;

}
.frontarchive {
	overflow: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-color: #dedede;
	text-align: left;
	vertical-align: top;
	width: 95%;
	color: #000000;
	height: 29%;
	border: 1px solid #707070;
	list-style-type: none;
	line-height: 13px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	margin-top: 12px;










}
.boldlinkbox {
	padding-top: 8px;
}
.secondfold {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	background-color: #dedede;
	height: 240px;
	width: 770px;
	padding-top: 8px;
	padding-left: 8px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #95192d;






}
.boards {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 15px;
	font-weight: normal;
	color: #000000;
	background-color: #FFFFFF;
	height: 161px;
	width: 217px;
	border: 1px solid #707070;
	text-align: left;
	vertical-align: top;




}
.frontnews {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #4d4d4d;
	text-align: left;
	vertical-align: top;
	height: 161px;
	width: 375px;
	border: 1px solid #707070;
	background-color: #FFFFFF;
	margin-left: 10px;






}
.frontnewsscroll {
	overflow: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 13px;
	color: #4d4d4d;
	height: 110px;
	width: 370px;
	margin-left: 5px;





}
.frontsmallads {
	height: 221px;
	width: 135px;
	margin-left: 10px;


}
.smallad {
	padding-bottom: 6px;
	margin-bottom: 6px;

}
.frontboardscroll {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 16px;
	margin-left: 5px;

}
.smallredtext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: normal;
	color: #95192d;
}
.footer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
	margin: 4px;
	padding: 4px;


}
.bottomline {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.storyphoto {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
	margin: 4px;
}
.bodytext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-align: left;
	margin: 5px;

}
.leftnav {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #707070;
	text-align: left;
	vertical-align: top;
	margin: 8px 4px 4px;
	line-height: normal;
	padding-top: 8px;


}
.leftsubnav {
	background-color: #dedede;
	margin-left: 4px;
	padding-left: 4px;
	color: #95192d;


}
.smalladinside {
	text-align: center;
	padding-top: 6px;

}
.writerhighlight {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #4d4d4d;
	text-align: left;
	list-style-position: inside;
	list-style-type: none;

}
.archivesearch {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #dedede;
	padding: 8px;
	height: auto;
	width: 85%;
	border: 1px solid #707070;
	margin-left: 20px;

}
.searchtext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-align: right;

}
.writername {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #95192d;
}
.bodytext12 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-align: left;
	margin: 5px;
	list-style-image: none;
	list-style-type: none;

}
.boldlink12 {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #95192d;
	text-decoration: none;
}
.footerlink {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
}
.leftnavlink {
	text-decoration: none;
	color: #ffffff;
}
.leftnavsublink {
	text-decoration: none;
	color: #95192d;
}
.thumbtext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #333333;
}

/* === MODERN-LAYER-V1 === */
/* Full-width, responsive refresh of the 2019 stylesheet.
   Palette is locked to the original: #95192d crimson, #dedede/#cccccc/
   #949494/#707070/#4d4d4d/#666666/#333333 greys, #000/#fff. #949494 is
   the right-edge pixel of assets/logo.jpg, so the masthead band can run
   the full width of the viewport with no seam. */

:root {
  --ss-crimson: #95192d;
  --ss-ink: #000000;
  --ss-muted: #4d4d4d;
  --ss-soft: #666666;
  --ss-rule: #707070;
  --ss-band: #dedede;
  --ss-mast: #949494;
  --ss-mast-light: #ededed;
  --ss-paper: #ffffff;
  --ss-rail-w: 380px;
}

/* ---- fluid shell ------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

/* The 2019 sheet zeroes the margin on `.background` only; the Zen Cart
   pages under /catalog/ don't carry that class, so they kept the
   browser's default 8px and sat 8px past the right edge. */
body { margin: 0; }

body.background {
  background-image: none;
  background-color: var(--ss-paper);
}

.bigtable,
.bodytable,
.content,
.header,
.slogan,
.topnav,
.featurecell,
.secondfold,
.bottomline {
  width: 100% !important;
  max-width: none !important;
}

.bigtable {
  /* Full bleed. The 2019 markup is `<table align="left">`, which maps to
     float:left — that both pinned the shell to the left edge AND made
     `margin:0 auto` a no-op, so every pixel of slack on a wide monitor
     piled up on the right. Unfloat it and let it span. */
  float: none !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: 16px;
  line-height: 1.65;
  border-collapse: collapse;
}

/* Breathing room that scales with the viewport instead of a fixed
   gutter, so the bands still reach both edges. border-box is required —
   these are width:100% table cells, so padding would otherwise be added
   ON TOP of the full width and push the page into horizontal scroll. */
.bigtable, .bigtable td, .bigtable th, .bigtable table { box-sizing: border-box; }

.featurecell,
.secondfold,
.slogan,
.topnav {
  padding-inline: clamp(14px, 2.2vw, 44px) !important;
  box-sizing: border-box;
}

/* The 2019 markup pins widths as HTML attributes (width="770",
   width="479", width="240"…). Neutralise them inside the shell only, so
   the Zen Cart pages under /catalog/ keep their own layout. */
.bigtable table,
.bigtable td,
.bigtable th {
  width: auto !important;
  max-width: 100% !important;
}

/* …but the main content cell and its inner table must still fill the
   shell. Without this they size to content (1158px inside a 1400px
   table) and leave a dead strip down the right of every page. These
   have to out-specify the `.bigtable td` rule directly above. */
.bigtable td.bodytable,
.bigtable table.content,
.bigtable td.header,
.bigtable td.slogan,
.bigtable td.topnav,
.bigtable td.featurecell,
.bigtable td.secondfold,
.bigtable td.bottomline,
.bigtable td.topbar {
  width: 100% !important;
}

/* Decorative 32px edge-fade column — it exists purely to end the old
   802px canvas, and it puts a grey stripe down a full-width layout. */
.rightfade { display: none !important; }

.content {
  font-size: 16px;
  line-height: 1.65;
}

/* Dead 2019 plugin objects. The .swf files were never archived, so
   these render as a grey "Couldn't load plugin" box — and the 503px
   masthead banner is wide enough to force a horizontal scrollbar on a
   phone all by itself. */
embed[type="application/x-shockwave-flash"],
object[type="application/x-shockwave-flash"],
applet { display: none !important; }

embed, object, iframe, img { max-width: 100%; }

/* ---- masthead ---------------------------------------------------- */
/* The 2019 masthead was a CSS background-image, which cannot be clicked
   and carries no alt text. install_logo.py puts a real anchored <img> in
   the cell, so the background MUST be cleared or the old logo.jpg paints
   underneath the new wordmark. */
.header {
  height: auto;
  /* The 2019 masthead's own left-to-right fade, both ends sampled from the
     original logo.jpg: #ededed at the wordmark, #949494 at the right edge.
     The new logo is transparent, so the gradient sits behind it. */
  background-color: var(--ss-mast-light);
  background-image: linear-gradient(to right,
      var(--ss-mast-light) 0%, var(--ss-mast) 100%) !important;
  padding: 14px clamp(14px, 2.2vw, 44px);
  box-sizing: border-box;
}

a.ss-brand {
  display: inline-block;
  line-height: 0;
}

a.ss-brand img {
  display: block;
  width: auto;
  height: clamp(38px, 4.4vw, 62px);
  max-width: 100%;
}

a.ss-brand:focus-visible { outline-offset: 4px; }

a.ss-foot-brandlink { display: inline-block; line-height: 0; }
a.ss-foot-brandlink img { display: block; width: 100%; max-width: 240px; height: auto; }

/* The crimson rule is drawn by .topbar's own background. The 5x3
   red.gif inside it is a 2019 spacer, and it carries an inline
   `height:auto` that beats any stylesheet width we set — stretching it
   to full width made it 840px tall. Drop the spacer, keep the band. */
.topbar { height: 4px; line-height: 0; font-size: 0; }
.topbar img { display: none !important; }

.slogan {
  height: auto;
  padding: 10px 18px;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ---- navigation -------------------------------------------------- */
.topnav {
  height: auto;
  background-image: none;
  background-color: var(--ss-band);
  border-bottom: 2px solid var(--ss-crimson);
  padding: 0 clamp(14px, 2.2vw, 44px);
  display: flex;
  flex-wrap: wrap;
  /* Five items left-aligned on a 1920 bar leave a wide dead gap on the
     right. Centre them inside the same 1700px content column so the band
     reads as balanced rather than half-empty. */
  justify-content: center;
  align-items: center;
  gap: clamp(4px, 1.2vw, 22px);
  box-sizing: border-box;
}

.topnav > * { flex: 0 0 auto; }

/* The nav ships <img> dividers between links; the flex gap replaces them. */
.topnav img { display: none; }

a.topnavlink {
  font-size: 14px;
  letter-spacing: 0.09em;
  padding: 16px 18px;
  color: var(--ss-muted);
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

a.topnavlink:hover,
a.topnavlink:focus-visible {
  color: var(--ss-crimson);
  border-bottom-color: var(--ss-crimson);
  background-color: rgba(0, 0, 0, .04);
}

/* Show the reader where they are — rebuild_chrome.py stamps
   aria-current on the matching item. */
a.topnavlink[aria-current="page"] {
  color: var(--ss-crimson);
  border-bottom-color: var(--ss-crimson);
  background-color: rgba(0, 0, 0, .06);
}

/* Keep the nav reachable on a long article. */
.content > tbody > tr > td.topnav,
td.topnav {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
}

/* ---- typography -------------------------------------------------- */
.headline {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.subhead   { font-size: 16px; color: var(--ss-muted); line-height: 1.4; }
.byline    { font-size: 13px; color: var(--ss-soft); }
.frontstory,
.bodytext,
.bodytext12 { font-size: 16px; line-height: 1.7; }

.frontarchive,
.frontnews,
.frontnewsscroll,
.frontboardscroll,
.boards,
.writerhighlight,
.thumbtext { font-size: 14px; line-height: 1.55; }

.footer, .footerlink { font-size: 13px; }
.smallredtext { font-size: 12px; }

a { color: var(--ss-crimson); }
a.boldlink, a.boldlink12, a.leftnavsublink { color: var(--ss-crimson); }
a.boldlink:hover, a.boldlink12:hover, a.leftnavsublink:hover,
a.footerlink:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--ss-crimson);
  outline-offset: 2px;
}

/* ---- panels ------------------------------------------------------ */
.frontarchive,
.boards,
.frontnews {
  border: 1px solid var(--ss-rule);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  height: auto;
  min-height: 0;
  padding: 12px;
  box-sizing: border-box;
}

.frontarchive { background-color: var(--ss-band); }
.frontnewsscroll { width: auto; height: auto; max-height: 240px; }
.frontnews { margin-left: 0; }

.featurecell { height: auto; padding: 22px 18px; }

/* Give the lead story a band of its own so the page reads as
   hero -> featured -> footer instead of content floating on white. */
.featurecell > table {
  background: rgba(0, 0, 0, .028);
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 4px;
}
.secondfold  { height: auto; padding: 22px 18px; }

.frontphoto img,
.storyphoto img { border-radius: 6px; }

/* ---- feature block ---------------------------------------------- */
/* Lay the lead story out as an explicit two-column block. .frontphoto is
   position:absolute in the 2019 sheet, which only works against the old
   fixed canvas; floating it worked while a sidebar constrained the
   column, but with the sidebar gone the float had nothing to wrap
   against and the headline dropped below the photo. */
.frontphoto {
  position: static !important;
  float: none;
  flex: 0 0 clamp(190px, 18vw, 280px);
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  font-size: 12px;
}

.frontphoto img { width: 100%; height: auto; }

/* A stray <br> between the photo and the story becomes an anonymous
   flex item and forces the text onto its own line. */
.featurecell > table > tbody > tr > td > br { display: none; }

.fronttext { flex: 1 1 340px; }

.fronttext {
  position: static !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  font-size: 16px;
}

/* ---- content columns --------------------------------------------- */
/* The feature block and the second fold are 2019 fixed-width table
   grids. Stretched to a 1400px shell they leave a dead zone in the
   middle, so drive them with flex: the story takes the free space, the
   rail keeps a sane fixed width. */
.featurecell > table,
.featurecell > table > tbody,
.secondfold > table,
.secondfold > table > tbody {
  display: block;
  width: 100%;
}

.featurecell > table > tbody > tr,
.secondfold > table > tbody > tr {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px;
  /* Bands stay full-bleed; the content group centres inside them. Past
     ~1700px a single article can't fill the width without running the
     prose to unreadable line lengths, so the leftover is split evenly
     as deliberate margin rather than pooling on one side. */
  max-width: 1700px;
  margin-inline: auto;
}

.featurecell > table > tbody > tr > td,
.secondfold > table > tbody > tr > td {
  display: block;
  min-width: 0;
  flex: 1 1 320px;
}

/* Inner pages run a three-column grid: "More Recent Stories" rail,
   story, ad column. Without an explicit basis the nav rail inherits
   `flex: 1 1 320px` and grows to match the story — 666px of grey block
   against 666px of article. Pin it narrow and let the story take the
   free space. */
.bigtable td.leftnav {
  flex: 0 0 clamp(220px, 16vw, 300px) !important;
  align-self: flex-start;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

/* The ad column on inner pages holds ~160px creatives, so let it size to
   them instead of reserving the homepage rail's full width. */
.featurecell > table > tbody > tr > td:last-child:not(:first-child):not(.ss-rail) {
  flex: 0 0 auto !important;
  max-width: var(--ss-rail-w);
}

/* The sidebar beside the lead story. homepage_layout.py moves the news
   feed and the message-board box in here, so it needs real width and
   its panels have to drop the 2019 fixed widths (217px / 375px) that
   otherwise leave them stranded as islands. */
/* :last-child also matches a LONE cell — on the homepage, where the
   sidebar was removed, that pinned the hero itself to the rail width. */
.featurecell > table > tbody > tr > td:last-child:not(:first-child),
td.ss-rail {
  flex: 0 0 var(--ss-rail-w);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

td.ss-rail > iframe { align-self: stretch; width: 100%; aspect-ratio: 16 / 9; height: auto; }
td.ss-rail > br { display: none; }

td.ss-rail .boards,
td.ss-rail .frontnews,
.boards,
.frontnews {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
}

/* Bound the feed so the rail lands near the story column's height
   instead of running 400px past it. */
td.ss-rail .frontnewsscroll { width: auto; max-height: 430px; overflow: auto; }
td.ss-rail .frontboardscroll { width: auto; max-height: none; }

/* Cap the reading measure on the prose only — capping the whole
   .fronttext column also shrank the story-archive panel nested inside
   it. Everything else (archive panel, rail) expands to fill. */
.frontstory, .bodytext, .bodytext12 { max-width: 86ch; }
.fronttext { max-width: none; }

/* Give the sidebar more of the extra room on a big monitor rather than
   dumping it all into the gap beside the story. */
@media (min-width: 1600px) {
  :root { --ss-rail-w: 440px; }
  .frontstory, .bodytext, .bodytext12 { max-width: 92ch; }
}
@media (min-width: 2000px) { :root { --ss-rail-w: 520px; } }

.leftnav {
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.leftnav .leftnavsublink,
.leftsubnav a {
  display: block;
  padding: 6px 0;
  color: var(--ss-paper);
  font-size: 13px;
  line-height: 1.35;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.leftnav .leftnavsublink:hover,
.leftsubnav a:hover { color: var(--ss-band); }

.leftsubnav { background-color: transparent; padding-left: 0; }
.leftsubnav a { display: inline-block; padding: 3px 0; }

/* ---- lead story: two columns ------------------------------------- */
/* Scoped with :has() to the cell that actually holds the story, so the
   inner pages' nav rail and ad column are untouched. Must sit after the
   content-columns block above, which sets these cells to display:block. */
.featurecell td:has(> .fronttext) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 26px;
}

/* One story shouldn't stretch across 1700px, but it must still line up
   with the Featured grid beneath it — cap the width, don't centre it. */
.featurecell > table > tbody > tr:has(.fronttext) {
  max-width: 1280px;
  margin-inline: 0;
}

/* Turn the plain "Read Full Story >" into a real affordance. Scoped to
   .boldlinkbox ONLY — an earlier attribute selector on
   a.boldlink[href^="/featurestory-id-"] also caught every entry in the hub
   story lists and rendered them as a stack of crimson buttons. */
.boldlinkbox a.boldlink {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 18px;
  background: var(--ss-crimson);
  color: var(--ss-paper);
  border-radius: 6px;
  font-size: 13px;
  letter-spacing: 0.03em;
}
.boldlinkbox a.boldlink:hover { background: #7a1425; text-decoration: none; }

/* ---- footer ------------------------------------------------------ */
.bottomline {
  border-bottom: none !important;
  border-top: 3px solid var(--ss-crimson);
  background: var(--ss-band);
  padding: 0 !important;
}

.ss-footer {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) 1fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: 1700px;
  padding: 30px clamp(14px, 2.2vw, 44px) 24px;
}

.ss-foot-brand { max-width: 420px; }

.ss-foot-slogan {
  margin: 12px 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.45;
  color: var(--ss-crimson);
}

.ss-foot-logo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
}

.ss-foot-pub {
  margin: 10px 0 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: var(--ss-muted);
}

.ss-foot-col { min-width: 150px; }

.ss-foot-h {
  margin: 0 0 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ss-crimson);
}

.ss-foot-col ul { list-style: none; margin: 0; padding: 0; }
.ss-foot-col li { margin: 0 0 7px; }

.ss-foot-col a.footerlink {
  font-size: 13px;
  color: var(--ss-ink);
  text-decoration: none;
}
.ss-foot-col a.footerlink:hover { color: var(--ss-crimson); text-decoration: underline; }

.ss-foot-base {
  border-top: 1px solid rgba(0, 0, 0, .14);
  padding: 14px clamp(14px, 2.2vw, 44px) 20px;
}
.ss-foot-base .smallredtext { margin: 0; line-height: 1.55; font-size: 12px; }

/* ---- homepage masthead + lead ------------------------------------ */
.ss-h1 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ss-crimson);
  margin: 4px 0 6px;
}

.ss-standfirst {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ss-muted);
  max-width: 70ch;
}

.ss-lead {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: flex-start;
  padding-top: 20px;
  border-top: 2px solid var(--ss-crimson);
}

.ss-lead-img { flex: 0 0 clamp(240px, 30vw, 420px); line-height: 0; }
.ss-lead-img img {
  width: 100%;
  /* Archive shots are portrait; unconstrained they make the lead a column
     of photo with the story pushed off the fold. */
  height: clamp(220px, 24vw, 320px);
  object-fit: cover;
  object-position: center 28%;
  border-radius: 8px;
  display: block;
}

.ss-lead-text { flex: 1 1 340px; min-width: 0; }

.ss-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ss-paper);
  background: var(--ss-crimson);
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
}

.ss-lead-title { margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; }
.ss-lead-title a { color: var(--ss-crimson); text-decoration: none; }
.ss-lead-title a:hover { text-decoration: underline; }
.ss-lead-sub { margin: 0 0 8px; font-size: 17px; font-weight: bold; color: var(--ss-muted); }
.ss-lead-by { margin: 0 0 10px; font-size: 13px; color: var(--ss-soft); }
.ss-lead-excerpt { margin: 0; font-size: 16px; line-height: 1.65; max-width: 74ch; }

@media (max-width: 860px) {
  .ss-lead { gap: 16px; }
  .ss-lead-img { flex: 1 1 100%; }
  .ss-lead-img img { max-width: 420px; }
}

/* ---- hub latest-articles river ----------------------------------- */
.ss-latest { margin: 26px 0 4px; }

ul.ss-latest-list,
ul.ss-archive-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

ul.ss-latest-list li,
ul.ss-archive-list li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  line-height: 1.4;
}
ul.ss-latest-list li:last-child,
ul.ss-archive-list li:last-child { border-bottom: none; }

ul.ss-latest-list a.boldlink,
ul.ss-archive-list a.boldlink { font-size: 16px; }

.ss-latest-by,
.ss-archive-by { color: var(--ss-soft); font-size: 13px; }

/* ---- reference tables (hub pages) -------------------------------- */
.ss-sub-h {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  color: var(--ss-ink);
  margin: 22px 0 8px;
}

table.ss-table {
  border-collapse: collapse;
  width: auto !important;
  min-width: min(420px, 100%);
  margin: 0 0 8px;
  font-size: 15px;
}

table.ss-table th,
table.ss-table td {
  border: 1px solid var(--ss-rule);
  padding: 8px 14px;
  text-align: left;
  width: auto !important;
}

table.ss-table th {
  background: var(--ss-crimson);
  color: var(--ss-paper);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

table.ss-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, .035); }

.ss-source {
  font-size: 12px;
  color: var(--ss-soft);
  font-style: italic;
  margin: 10px 0 0;
}

@media (max-width: 860px) {
  table.ss-table { min-width: 0; width: 100% !important; font-size: 14px; }
  table.ss-table th, table.ss-table td { padding: 7px 9px; }
}

/* ---- Featured Stories grid --------------------------------------- */
/* Replaces the 2019 fixed-height scroll boxes. Nothing here scrolls
   internally — the grid simply wraps to the available width. */
.ss-featured { margin: 34px 0 8px; max-width: 1700px; }

.ss-featured-h {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ss-crimson);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ss-crimson);
}

.ss-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
}

.ss-card { list-style: none; margin: 0; }

.ss-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--ss-ink);
  background: var(--ss-paper);
  border: 1px solid var(--ss-rule);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}

.ss-card > a:hover,
.ss-card > a:focus-visible {
  border-color: var(--ss-crimson);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
  transform: translateY(-2px);
}

.ss-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--ss-band);
}

.ss-card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px 14px;
}

.ss-card-title {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.3;
  color: var(--ss-crimson);
}

.ss-card-by { font-size: 12px; color: var(--ss-soft); }

/* ================================================================== */
/* Mobile — the 2019 layout is a fixed table grid, so the cells have to
   be released to block flow before anything else can reflow.          */
/* ================================================================== */
@media (max-width: 860px) {
  /* Depth-independent. Child-combinator paths like
     `.content > tbody > tr > td` matched the homepage but NOT the inner
     pages, whose 2019 markup nests a level deeper — those pages kept
     `display: table-cell` at 770px and scrolled sideways. Every cell in
     the shell stacks, whatever its depth. */
  .bigtable,
  .bigtable tbody,
  .bigtable tr,
  .bigtable td,
  .bigtable th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    /* A table-cell ignores horizontal margin; a block does not. .footer
       carries margin:4px, which once blocked pushed the page 4px wide. */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Stack as a column so the running order can be controlled. On an
     article the "More Recent Stories" rail is the FIRST cell in the
     2019 grid; left alone it stacks on top and buries the headline
     1084px down. Send it to the bottom — the story leads. */
  .featurecell table tr,
  .bodytext table tr {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    gap: 18px;
  }
  .bigtable td.leftnav { order: 9; }

  /* The rail's panels are supporting content — keep them below the
     story on a phone rather than between the headline and the text. */
  td.ss-rail { flex: 1 1 auto; gap: 14px; }
  .featurecell > table > tbody > tr > td { display: block !important; }
  .frontphoto { margin: 0 0 14px; }

  .ss-footer { grid-template-columns: 1fr 1fr; gap: 22px; padding: 22px 14px 18px; }
  .ss-foot-brand { grid-column: 1 / -1; }
  .featurecell > table { padding: 14px; border-radius: 10px; }
  .bigtable td.bottomline { padding: 0 !important; }

  .ss-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .ss-featured { margin: 24px 0 4px; }
  .ss-card-title { font-size: 14px; }

  .bigtable td.leftnav {
    flex: 1 1 auto !important;
    position: static;
    max-height: 340px;
    overflow-y: auto;
  }
  .featurecell > table > tbody > tr > td:last-child:not(:first-child):not(.ss-rail) {
    flex: 1 1 auto !important;
    max-width: 100%;
  }

  .featurecell, .secondfold { padding: 16px 14px; }

  .header { height: auto; padding: 10px 14px; }

  .slogan { font-size: 13px; padding: 9px 14px; }

  /* The blanket `td { display:block }` above also hits .topnav, which
     would drop it out of flex and stack every link on its own 71px row.
     Both rules are !important, so this selector must also out-specify
     `.content > tbody > tr > td` — hence the full path plus .topnav. */
  /* Wrapped, the eight nav items stack five rows deep and eat 212px
     before any content — the headline lands at 664px, far below the
     fold. A single swipeable row keeps every link reachable in 44px. */
  .bigtable td.topnav,
  .topnav {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 4px;
    gap: 0;
  }
  .topnav::-webkit-scrollbar { display: none; }

  /* 44px tap targets (WCAG 2.5.5); never let a label break mid-word. */
  a.topnavlink {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    padding: 0 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-bottom-width: 2px;
  }

  /* An empty spacer <span class="topnavlink"> sits in the 2019 nav. */
  span.topnavlink { display: none; }

  .headline { font-size: 24px; }

  /* Feature photo goes full width above the story rather than floating
     into a column that no longer exists. */
  .frontphoto {
    float: none;
    max-width: 100%;
    margin: 0 0 14px;
    text-align: center;
  }
  /* The cover shot is only 192px wide natively — stretching it to the
     full 390px viewport upsamples it into mush and swallows the fold.
     Cap it near its natural size and centre it instead. */
  .frontphoto img {
    width: auto;
    height: auto;
    max-width: min(100%, 240px);
  }

  .frontnews,
  .boards,
  .frontarchive {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
  }

  .frontnewsscroll { max-height: none; }
  .frontarchive { max-height: 320px; }

  /* Nested 2019 tables still size to their widest fixed column, which
     drags the whole shell out to 802-903px and gives the page a
     horizontal scrollbar. `table-layout: fixed` makes columns respect
     the container instead of their content's min-width — the one lever
     that reflows a legacy fixed-width grid without touching markup. */
  .bigtable table {
    table-layout: fixed;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bigtable td,
  .bigtable th {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

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

/* Zen Cart (/catalog/) ships its own stylesheet with a 1050px fixed
   column set, which our .bigtable-scoped rules never reach. Release the
   wrappers by id so the store index reflows like everything else. */
@media (max-width: 860px) {
  #mainWrapper, #headerWrapper, #contentMainWrapper,
  #navMain, #navMainWrapper, #navMainSearch, #navMainLinks,
  #navBreadCrumb, #navCatTabs, #navCatTabsWrapper,
  #centerColumnOuter, #centerColumn, #indexDefault,
  [id^="centerColumnWrapper"], [id^="headerWrapper"], [id^="logoWrapper"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    /* width:100% PLUS a horizontal margin overflows by exactly that
       margin — #centerColumnOuter ships `margin: 0 7.5px`. */
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  #navSupp, #navSupp ul, #dropMenu, #dropMenu ul,
  ul.level1, ul.level2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 0;
  }
  #navCatTabs ul, #navMainLinks ul, ul.level1, ul.level2 {
    display: flex;
    flex-wrap: wrap;
  }

  /* Backstop: every descendant is capped at its own container, so no
     single leftover Zen Cart width can drag the page sideways. */
  #mainWrapper *, #headerWrapper *, #contentMainWrapper * {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .bigtable { font-size: 15px; }
  .headline { font-size: 21px; }
  .frontstory, .bodytext, .bodytext12 { font-size: 15px; }
  a.topnavlink { padding: 12px 9px; font-size: 12px; }
  .featurecell, .secondfold { padding: 14px 11px; }
}