/* ============================================================
   TRACTORFROLIC — classic portal stylesheet
   Early-2000s MSN/Yahoo portal conventions, modern engineering.

   No webfonts: Arial, Verdana and Georgia are on every machine,
   they are what the era actually used, and a cross-origin font
   request would send visitor IP addresses to a third party.

   Era colours arrive as --e1..--e6 and --now from inc/eras.php.
   Components read --c, set per post by the template.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --blue:#0055A4;
  --blue-dk:#003B75;
  --blue-lt:#DCEBFA;
  --nav-hi:#F4F8FC;
  --link:#0000CC;
  --link-vis:#551A8B;
  --rule:#B8C9D8;
  --rule-2:#D7E2EC;
  --bg:#F4F6F8;
  --paper:#FFFFFF;
  --accent:#C72026;
  --ink:#1A1A1A;
  --ink-2:#444;
  --ink-3:#6B7680;
  --sans:Arial,Helvetica,sans-serif;
  --small:Verdana,Geneva,Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --maxw:1300px;
  --gap:10px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 13px/1.45 var(--sans);
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--sans);line-height:1.2}
a{color:var(--link);text-decoration:underline}
a:visited{color:var(--link-vis)}
a:hover{color:#C00}
p{margin:0 0 .75em}
ul,ol{margin:0;padding:0}

.trh-skip{
  position:absolute;left:-9999px;top:0;background:#fff;color:#000;
  padding:8px 12px;z-index:100;
}
.trh-skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

.trh-wrap{max-width:var(--maxw);margin:0 auto;padding:0 8px}

/* ============================================================
   HEADER
   ============================================================ */
.trh-bar{
  background:var(--blue);
  background-image:linear-gradient(180deg,#1E7AC8 0%,#0A5CA8 48%,#004B92 100%);
  border-bottom:1px solid var(--blue-dk);
  position:relative;overflow:hidden;
}
.trh-bar::after{
  /* rural horizon: a wash, not a photograph, so nothing loads */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 88% 120%, rgba(120,170,70,.55) 0%, rgba(120,170,70,0) 60%),
    radial-gradient(90% 70% at 8% 130%, rgba(90,140,60,.40) 0%, rgba(90,140,60,0) 62%);
}
.trh-bar .trh-wrap{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:12px;padding-block:10px 12px;
}
.trh-word{
  display:inline-block;text-decoration:none;color:#fff;
  font:700 40px/1 var(--sans);letter-spacing:-1px;
  text-shadow:0 2px 3px rgba(0,0,0,.45);
}
.trh-word:visited,.trh-word:hover{color:#fff}
.trh-word i{font-style:italic;color:#FFD200}
.trh-tag{
  grid-column:1;margin:3px 0 0;color:#DCEBFA;
  font:400 12px/1.3 var(--small);text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.trh-bar-right{grid-column:2;grid-row:1 / span 2;align-self:center}

.trh-srch{display:flex;gap:4px}
.trh-srch input[type=search]{
  width:230px;padding:5px 7px;font:400 13px var(--sans);
  border:1px solid #7B9CB8;border-top-color:#5A7E9C;background:#fff;
}
.trh-srch button{
  padding:5px 14px;font:700 12px var(--sans);cursor:pointer;color:#153;
  background:linear-gradient(180deg,#FDFDFD 0%,#E4E9EE 100%);
  border:1px solid #8699A8;border-radius:2px;color:#102A3C;
}
.trh-srch button:hover{background:linear-gradient(180deg,#fff 0%,#D9E4ED 100%)}

/* ---------- tab navigation ---------- */
.trh-nav{
  background:linear-gradient(180deg,#E8EEF4 0%,#CFDBE6 100%);
  border-bottom:1px solid var(--rule);
}
.trh-nav .trh-wrap{display:flex;flex-wrap:wrap;gap:2px;padding-top:4px}
.trh-nav a{
  display:block;padding:6px 14px;text-decoration:none;
  font:700 12px/1.2 var(--sans);color:#10324F;
  background:linear-gradient(180deg,#FBFCFD 0%,#E2E9EF 100%);
  border:1px solid var(--rule);border-bottom:none;
  border-radius:4px 4px 0 0;
}
.trh-nav a:visited{color:#10324F}
.trh-nav a:hover{background:linear-gradient(180deg,#fff 0%,#EDF3F8 100%);color:#C00}
.trh-nav a[aria-current=page]{
  background:var(--paper);color:#000;position:relative;top:1px;
}
.trh-nav a.trh-nav-now{color:var(--accent)}

/* ============================================================
   PORTAL GRID
   ============================================================ */
.trh-portal{
  display:grid;gap:var(--gap);align-items:start;
  grid-template-columns:215px minmax(0,1fr) 280px;
  padding-block:10px 24px;
}
.trh-col-l,.trh-col-r{min-width:0}
.trh-col-c{min-width:0;display:flex;flex-direction:column;gap:var(--gap)}

/* article pages: two columns */
.trh-cols{
  display:grid;gap:var(--gap);align-items:start;
  grid-template-columns:minmax(0,1fr) 280px;padding-block:10px 24px;
}
.trh-main{min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
/* breadcrumb and archive header span both columns */
.trh-cols > .trh-crumb,.trh-cols > .trh-arch-head{grid-column:1 / -1;margin-bottom:0}

/* ============================================================
   MODULE — the portal box
   ============================================================ */
.trh-mod{
  background:var(--paper);border:1px solid var(--rule);margin-bottom:var(--gap);
}
.trh-mod:last-child{margin-bottom:0}
.trh-mod > h2,.trh-modhead{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0;padding:5px 8px;color:#fff;
  font:700 12px/1.25 var(--sans);
  background:linear-gradient(180deg,#2E7FC4 0%,#0C5BA4 55%,#064F93 100%);
  border-bottom:1px solid var(--blue-dk);
}
.trh-modhead h2{margin:0;font:700 12px/1.25 var(--sans);color:#fff}
.trh-modhead a,.trh-mod > h2 a{color:#DCEBFA;font-weight:400;font-size:11px}
.trh-mod--accent > h2,.trh-mod--accent .trh-modhead{
  background:linear-gradient(180deg,#D9474C 0%,#C21F25 55%,#A91A20 100%);
  border-bottom-color:#8E1317;
}
.trh-modbody{padding:8px}

/* ---------- sidebar lists ---------- */
.trh-list{list-style:none}
.trh-list li{border-bottom:1px dotted var(--rule-2)}
.trh-list li:last-child{border-bottom:none}
.trh-list a{
  display:flex;align-items:center;gap:6px;
  padding:5px 8px;font:400 12px/1.3 var(--small);text-decoration:none;
}
.trh-list a:hover{background:var(--nav-hi);text-decoration:underline}
.trh-list .trh-lbl{flex:1 1 auto;text-decoration:underline}
.trh-list .trh-n{
  flex:0 0 auto;color:var(--ink-3);font-size:11px;font-family:var(--small);
}
.trh-ico{flex:0 0 auto;width:16px;height:16px;display:block}

/* makers and archives sit tighter */
.trh-list--tight a{padding:3px 8px;font-size:11px}

/* ============================================================
   FEATURED ARTICLE
   ============================================================ */
.trh-feat{display:grid;grid-template-columns:45% 1fr;gap:12px;padding:10px}
.trh-feat .trh-figure{margin:0}
.trh-feat h2,.trh-feat h3{
  margin:4px 0 6px;font:700 21px/1.2 var(--sans);
}
.trh-feat h2 a,.trh-feat h3 a{text-decoration:underline}
.trh-feat .trh-dek{
  font:400 14px/1.5 var(--serif);color:#2A2A2A;margin:0 0 8px;
}
.trh-more{
  display:inline-block;font:700 12px var(--sans);text-decoration:underline;
}
.trh-more::before{content:"\00BB\0020";color:var(--accent);text-decoration:none}

/* ============================================================
   CARD ROWS
   ============================================================ */
.trh-row{
  display:grid;gap:10px;padding:8px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.trh-card{
  min-width:0;border:1px solid var(--rule-2);background:#fff;padding:7px;
  display:flex;flex-direction:column;
}
/* trh_card('stack') emits text then image; in a card row the picture leads */
.trh-card .trh-figure{order:-1}
.trh-card .trh-card-text{order:1}
.trh-card .trh-figure{margin:0 0 6px}
.trh-card h3{margin:3px 0 4px;font:700 13px/1.28 var(--sans)}
.trh-card .trh-dek{
  margin:4px 0 0;font:400 11px/1.45 var(--small);color:var(--ink-2);
}
.trh-card--lead h3{font-size:16px}

/* dense two-column headline list */
.trh-dense{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 14px;padding:4px 8px 8px;
}
.trh-dense-it{
  display:grid;grid-template-columns:62px 1fr;gap:8px;
  padding:7px 0;border-bottom:1px dotted var(--rule-2);min-width:0;
}
.trh-dense-it .trh-figure{margin:0}
.trh-dense-it h3{margin:2px 0 3px;font:700 12px/1.3 var(--sans)}
.trh-dense-it .trh-meta{font-size:10px}

/* ---------- kicker, meta ---------- */
.trh-kick{
  display:inline-block;padding-left:6px;border-left:3px solid var(--c,#0055A4);
  font:700 10px/1.4 var(--small);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-2);
}
.trh-kick--now{color:var(--accent)}
.trh-meta{
  font:400 11px/1.4 var(--small);color:var(--ink-3);
}
.trh-meta time{white-space:nowrap}

/* ---------- figures ---------- */
.trh-figure{margin:0;position:relative}
.trh-figure img,.trh-figure svg{
  width:100%;height:100%;object-fit:cover;border:1px solid var(--rule-2);
}
.trh-figure figcaption{
  margin-top:4px;font:400 10px/1.4 var(--small);color:var(--ink-3);
}
.trh-disclose{
  position:absolute;left:0;bottom:0;
  background:rgba(0,0,0,.62);color:#fff;
  font:400 9px/1 var(--small);padding:3px 5px;
}

/* ============================================================
   ERA CHIPS
   ============================================================ */
.trh-sw,.trh-chip{
  display:inline-block;width:11px;height:11px;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.35);
}
.trh-eragrid{
  display:grid;gap:6px;padding:8px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.trh-eragrid a{
  display:flex;align-items:center;gap:7px;padding:6px 8px;
  border:1px solid var(--rule-2);background:var(--nav-hi);
  font:400 12px var(--small);text-decoration:none;
}
.trh-eragrid a:hover{background:var(--blue-lt)}
.trh-eralabel{flex:1 1 auto;text-decoration:underline;color:var(--link)}
.trh-eracount{color:var(--ink-3);font-size:11px}

/* ============================================================
   ADVERTISING PLACEHOLDERS
   ============================================================ */
.trh-ad{
  margin:0 0 var(--gap);display:flex;flex-direction:column;align-items:center;
  justify-content:center;background:#F0F1F3;border:1px dashed #AFB8C0;
  color:#8A939B;font:400 10px/1.4 var(--small);text-align:center;
  padding:6px;
}
.trh-ad__label{letter-spacing:.08em;text-transform:uppercase}
.trh-ad--sidebar_rect{min-height:250px}
.trh-ad--header_leaderboard,.trh-ad--home_inline,
.trh-ad--article_incontent,.trh-ad--article_footer{min-height:90px}
.trh-ad--mobile_infeed{min-height:100px}

/* ============================================================
   ARTICLE
   ============================================================ */
.trh-crumb{
  padding:6px 8px;background:var(--paper);border:1px solid var(--rule);
  font:400 11px/1.4 var(--small);margin-bottom:var(--gap);
}
.trh-crumb a{text-decoration:underline}
.trh-article{background:var(--paper);border:1px solid var(--rule);padding:16px 20px 20px}
.trh-article h1{
  margin:6px 0 8px;font:700 30px/1.15 var(--sans);letter-spacing:-.5px;
}
.trh-byline{
  display:flex;flex-wrap:wrap;gap:4px 12px;padding:6px 0 10px;
  border-bottom:1px solid var(--rule-2);margin-bottom:14px;
  font:400 11px/1.4 var(--small);color:var(--ink-3);
}
.trh-answer{
  font:400 17px/1.55 var(--serif);color:#1C1C1C;
  border-left:4px solid var(--blue);padding-left:12px;margin:0 0 16px;
}
.trh-body{font:400 16px/1.65 var(--serif);max-width:68ch}
.trh-body h2{margin:1.6em 0 .4em;font:700 20px/1.25 var(--sans)}
.trh-body h3{margin:1.4em 0 .35em;font:700 16px/1.3 var(--sans)}
.trh-body ul,.trh-body ol{margin:0 0 1em 1.3em}
.trh-body li{margin-bottom:.35em}
.trh-body img{margin:1.2em 0}
.trh-body blockquote{
  margin:1.2em 0;padding:8px 14px;background:var(--nav-hi);
  border-left:4px solid var(--rule);font-style:italic;
}

.trh-share{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:20px 0;padding:8px;background:var(--nav-hi);
  border:1px solid var(--rule-2);font:400 11px var(--small);
}
.trh-share-lbl{font-weight:700;margin-right:2px}
.trh-share a,.trh-share button{
  padding:3px 9px;text-decoration:none;font:400 11px var(--small);
  background:linear-gradient(180deg,#fff 0%,#E6ECF2 100%);
  border:1px solid var(--rule);cursor:pointer;color:var(--link);
}
.trh-share a:hover,.trh-share button:hover{background:#fff;text-decoration:underline}

.trh-sources{margin-top:24px;padding-top:12px;border-top:1px solid var(--rule-2)}
.trh-sources h2{font:700 14px var(--sans);margin-bottom:8px}
.trh-sources ol{margin-left:1.3em;font:400 12px/1.5 var(--small)}
.trh-sources li{margin-bottom:5px}
.trh-src-date{color:var(--ink-3)}
.trh-src-flag{color:var(--accent);font-weight:700}

/* ---------- archive ---------- */
.trh-arch-head{
  background:var(--paper);border:1px solid var(--rule);
  padding:10px;margin-bottom:var(--gap);
}
.trh-arch-head h1{font:700 22px/1.2 var(--sans)}
.navigation.pagination,.trh-pag{
  display:flex;gap:4px;flex-wrap:wrap;padding:10px 8px;
  font:400 12px var(--small);
}
.navigation.pagination .nav-links{display:flex;gap:4px;flex-wrap:wrap}
.navigation.pagination h2{position:absolute;left:-9999px}
.page-numbers{
  padding:3px 9px;text-decoration:none;border:1px solid var(--rule);
  background:linear-gradient(180deg,#fff 0%,#E8EEF4 100%);
}
.page-numbers.current{background:var(--blue);color:#fff;border-color:var(--blue-dk)}

/* ---------- notices ---------- */
.trh-startup,.trh-empty{
  background:#FFFDF2;border:1px solid #E3D79A;padding:14px;
  font:400 13px/1.5 var(--sans);
}
.trh-startup h2,.trh-empty h2{font-size:16px;margin-bottom:8px}
.trh-startup ol{margin-left:1.4em}
.trh-startup li{margin-bottom:5px}
.trh-startup code{background:#F0EDDC;padding:1px 4px;font-size:12px}

/* ---------- did you know ---------- */
.trh-dyk{display:flex;gap:8px;padding:9px;align-items:flex-start}
.trh-dyk-txt{font:400 12px/1.5 var(--small)}
.trh-dyk-txt p{margin:0 0 5px}

/* ============================================================
   FOOTER
   ============================================================ */
.trh-foot{
  background:linear-gradient(180deg,#E8EEF4 0%,#D3DEE8 100%);
  border-top:1px solid var(--rule);margin-top:4px;
}
.trh-foot .trh-wrap{padding-block:14px 20px}
.trh-foot nav{
  display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:8px;
  font:400 12px var(--small);
}
.trh-foot p{
  margin:0 0 5px;font:400 11px/1.55 var(--small);color:#49555F;max-width:90ch;
}
.trh-foot .trh-sig{font-weight:700;color:#10324F}

/* ============================================================
   RESPONSIVE
   The desktop portal is dense on purpose. Mobile is not a
   shrunken copy of it: the rails move below the article flow
   and the three-across rows become one column.
   ============================================================ */
@media (max-width:1100px){
  .trh-portal{grid-template-columns:200px minmax(0,1fr)}
  .trh-col-r{grid-column:1 / -1;display:grid;gap:var(--gap);
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
  .trh-col-r .trh-mod{margin-bottom:0}
  .trh-cols{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
  .trh-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trh-feat{grid-template-columns:1fr}
  .trh-feat h2,.trh-feat h3{font-size:19px}
  .trh-dense{grid-template-columns:1fr}
  .trh-article{padding:12px 14px 16px}
  .trh-article h1{font-size:24px}
}

@media (max-width:680px){
  .trh-portal{grid-template-columns:1fr}
  .trh-col-c{order:1}
  .trh-col-l{order:2}
  .trh-col-r{order:3;grid-template-columns:1fr}
  .trh-bar .trh-wrap{grid-template-columns:1fr;padding-bottom:10px}
  .trh-bar-right{grid-column:1;grid-row:auto}
  .trh-srch input[type=search]{width:100%}
  .trh-srch{width:100%}
  .trh-word{font-size:30px}
  .trh-nav .trh-wrap{gap:2px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
  .trh-nav a{white-space:nowrap}
  .trh-row{grid-template-columns:1fr}
  /* a full-width 4:3 photo per card turns the feed into a scroll */
  .trh-card .trh-figure img,.trh-card .trh-figure svg{max-height:190px}
  .trh-list a{padding:9px 8px;font-size:13px}
  .trh-eragrid{grid-template-columns:1fr}
  .trh-body{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

@media print{
  .trh-nav,.trh-col-l,.trh-col-r,.trh-ad,.trh-share,.trh-foot nav{display:none}
  body{background:#fff}
  .trh-article{border:none;padding:0}
}