/* EAS NEWS — shared newspaper theme
   Extracted from oakdale_technical_leader_coop_builder.html (Cap's upload, 2026-08-17).
   Every page under /free-help/ (nav label "NEWS") should link this stylesheet
   so the whole section reads as one paper, not a pile of separately-styled pages.
   Steampunk character art stays in play per Cap's note -- it fits the newspaper
   aesthetic (old-world illustration look), so don't strip it when converting pages. */

:root{
  --paper:#f7f1e3;
  --paper2:#efe6d1;
  --ink:#1f1b16;
  --muted:#5b554d;
  --line:#8a7f70;
  --black:#151515;
  --accent:#7f1d1d;
}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  background:
    repeating-linear-gradient(0deg,rgba(60,50,35,.03) 0,rgba(60,50,35,.03) 1px,transparent 1px,transparent 5px),
    var(--paper);
}
.wrap{width:min(1180px,95vw);margin:auto}

/* masthead -- reusable, not hardcoded to one edition name.
   Override .kicker/.papername/.edition text per page. */
.mast{
  border-bottom:6px double var(--black);
  padding:18px 0 10px;
  text-align:center;
}
.kicker{
  font:.72rem "Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.18em;
}
.papername{
  font-family:"Times New Roman",Georgia,serif;
  font-size:clamp(3rem,8vw,5.8rem);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.03em;
  margin:6px 0;
}
.edition{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:7px 0;font:.78rem "Courier New",monospace;text-transform:uppercase
}

.lead{
  text-align:center;
  font-size:1.15rem;
  max-width:900px;
  margin:18px auto 22px;
}
.banner{
  border-top:4px double var(--black);
  border-bottom:4px double var(--black);
  padding:10px 0;
  margin-bottom:20px;
  font-weight:bold;
  text-align:center;
  letter-spacing:.03em;
}

.layout{
  display:grid;
  grid-template-columns:2.1fr 1fr;
  gap:22px;
  align-items:start;
}
.paperbox{
  background:rgba(255,255,255,.28);
  border:1px solid var(--line);
  padding:16px;
  margin-bottom:18px;
}
.headline{
  font-size:clamp(1.8rem,4vw,3rem);
  line-height:1;
  margin:0 0 10px;
}
.subhead{
  font-style:italic;
  color:var(--muted);
  margin-bottom:12px;
}
.columns{
  column-count:2;
  column-gap:24px;
}
.columns p{margin:0 0 12px}
.pullquote{
  border-top:2px solid var(--black);
  border-bottom:2px solid var(--black);
  padding:12px 0;
  margin:14px 0;
  font-size:1.18rem;
  font-style:italic;
  text-align:center;
}

.formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.full{grid-column:1/-1}
label{
  display:block;
  font:.75rem "Courier New",monospace;
  text-transform:uppercase;
  margin-bottom:4px;
  letter-spacing:.06em;
}
input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fffdfa;
  padding:10px;
  color:var(--ink);
  font:1rem Georgia,"Times New Roman",serif;
}
textarea{min-height:85px;resize:vertical}
button{
  border:1px solid var(--black);
  background:#ece2cb;
  color:var(--ink);
  padding:10px 14px;
  font:700 .8rem "Courier New",monospace;
  text-transform:uppercase;
  cursor:pointer;
}
button:hover{background:#e4d8bc}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.result{
  border:2px solid var(--black);
  background:#fbf7ee;
  padding:14px;
  margin-top:14px;
}
.result h3{margin:0 0 10px;font-size:1.45rem}
.money{font-family:"Courier New",monospace;font-weight:bold}
.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{border:1px solid var(--line);padding:8px;text-align:left}
.table th{
  background:#e7dcc4;
  font:.75rem "Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.06em
}
.good{color:#1f5b29}
.bad{color:#8a1e1e}

.sidebar .paperbox{background:#f4ecda}
.listing{
  border-bottom:1px dotted var(--line);
  padding:10px 0;
}
.listing:last-child{border-bottom:0}
.listing strong{display:block}
.stamp{
  display:inline-block;
  border:2px solid var(--accent);
  color:var(--accent);
  padding:4px 8px;
  font:700 .72rem "Courier New",monospace;
  text-transform:uppercase;
  transform:rotate(-2deg);
}

.footer{
  margin-top:24px;
  padding:20px 0 40px;
  border-top:4px double var(--black);
  text-align:center;
  font:.8rem "Courier New",monospace;
  color:var(--muted)
}

/* newspaper photo boxes -- mixed small/medium/large placeholders woven into
   article layouts so pages read like a real printed page with photos, not a
   uniform stack of text boxes. Swap the placeholder fill for a real <img>
   later; the box/caption chrome stays the same either way. */
.photo-box{
  border:1px solid var(--black);
  background:#e7dcc4;
  margin:16px 0;
}
.photo-box .ph-fill{
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 10px,transparent 10px,transparent 20px),
    #d9cdae;
  color:var(--muted);
  font:700 .68rem "Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-align:center;
  padding:10px;
}
.photo-box .ph-fill img{width:100%;height:100%;object-fit:cover;display:block}
.photo-box figcaption{
  padding:8px 10px;
  font:.72rem "Courier New",monospace;
  color:var(--muted);
  border-top:1px solid var(--line);
}
.photo-box.small{width:180px}
.photo-box.small .ph-fill{aspect-ratio:1/1}
.photo-box.medium{width:100%;max-width:340px}
.photo-box.large{width:100%}
.photo-box.large .ph-fill{aspect-ratio:16/9}

.photo-box.float-right{float:right;margin:0 0 14px 20px}
.photo-box.float-left{float:left;margin:0 20px 14px 0}

.photo-row{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0}
.photo-row .photo-box{margin:0;flex:1;min-width:140px}

@media(max-width:700px){
  .photo-box.float-right,.photo-box.float-left{float:none;margin:14px auto;width:100%;max-width:340px}
  .photo-row{flex-direction:column}
}

/* section tab row -- used on the front page and every section page so the
   whole /free-help/ area reads like flipping through sections of one paper */
.paper-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
  border-top:2px solid var(--black);
  border-bottom:2px solid var(--black);
  margin:22px 0 28px;
}
.paper-tabs a{
  flex:1;
  min-width:130px;
  text-align:center;
  padding:12px 10px;
  font:700 .76rem "Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink);
  text-decoration:none;
  border-right:1px solid var(--line);
}
.paper-tabs a:last-child{border-right:0}
.paper-tabs a:hover{background:rgba(0,0,0,.05)}
.paper-tabs a.current{background:var(--black);color:var(--paper)}
@media(max-width:700px){
  .paper-tabs{flex-direction:column}
  .paper-tabs a{border-right:0;border-bottom:1px dotted var(--line)}
  .paper-tabs a:last-child{border-bottom:0}
}

/* article listing / index grid -- used on the NEWS hub to list all articles
   newspaper-style, and reusable for future section fronts (classifieds, etc) */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.article-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.3);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-decoration:none;
  color:inherit;
}
.article-card:hover{background:rgba(255,255,255,.5)}
.article-card .section-tag{
  font:700 .68rem "Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--accent);
}
.article-card h3{margin:0;font-size:1.2rem;line-height:1.15}
.article-card p{margin:0;color:var(--muted);font-size:.92rem}

/* single-article page furniture -- byline strip, section head, callouts,
   good/bad compare box, card grid, closing CTA banner. Used across every
   converted /free-help/ article. */
.art-byline{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:7px 0;margin-bottom:18px;
  font:.72rem "Courier New",monospace;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted)
}
.dept-head{
  display:flex;align-items:center;gap:12px;
  margin:26px 0 12px;
  font:700 .78rem "Courier New",monospace;text-transform:uppercase;letter-spacing:.14em;
  color:var(--accent)
}
.dept-head:before,.dept-head:after{content:"";flex:1;border-top:2px solid var(--accent)}
.callout{
  border:1px solid var(--line);
  border-left:6px solid var(--black);
  background:rgba(255,255,255,.3);
  padding:14px 16px;
  margin:16px 0;
}
.callout.good{border-left-color:#1f5b29}
.callout.bad{border-left-color:#8a1e1e}
.callout.warn{border-left-color:#946816}
.sources-list{list-style:none;margin:12px 0 0;padding:0}
.sources-list li{border-bottom:1px dotted var(--line);padding:9px 0}
.sources-list li:last-child{border-bottom:0}
.sources-list a{color:var(--accent);text-decoration:underline}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.stat-box{padding:16px;border:1px solid var(--line);background:#f4ecda;text-align:center}
.stat-box .n{font-size:2rem;font-weight:900;font-family:Georgia,serif;color:var(--accent);line-height:1}
.stat-box small{display:block;margin-top:6px;color:var(--muted);font-size:.8rem}
.term-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.term-box{padding:14px 16px;border:1px solid var(--line);background:rgba(255,255,255,.25)}
.term-box .t{font-weight:bold;margin-bottom:4px}
.term-box .why{color:var(--muted);font-size:.92rem}
.checklist{display:grid;gap:0;margin:16px 0;border:1px solid var(--line)}
.checklist .chk{padding:10px 14px;border-bottom:1px dotted var(--line)}
.checklist .chk:last-child{border-bottom:0}
@media(max-width:760px){.stat-grid,.term-list{grid-template-columns:1fr}}

/* work matrix / role table / interactive checklist-score / reveal scenarios */
.art-table{width:100%;border-collapse:collapse;margin:16px 0;border:1px solid var(--line)}
.art-table th,.art-table td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.art-table th{background:#e7dcc4;font:700 .72rem "Courier New",monospace;text-transform:uppercase;letter-spacing:.06em}
.art-badge{display:inline-block;padding:3px 8px;border:1px solid var(--accent);color:var(--accent);font:700 .68rem "Courier New",monospace;text-transform:uppercase}
.reveal-box{border:1px solid var(--line);background:rgba(255,255,255,.25);padding:14px 16px;margin-bottom:10px}
.reveal-box h4{margin:0;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:1rem;font-weight:normal}
.reveal-box .answer{display:none;margin-top:10px;padding-top:10px;border-top:1px dotted var(--line);color:var(--muted)}
.reveal-box.open .answer{display:block}
.reveal-btn{border:1px solid var(--black);background:#ece2cb;color:var(--ink);padding:6px 12px;font:700 .72rem "Courier New",monospace;text-transform:uppercase;cursor:pointer;flex:none}
.reveal-btn:hover{background:#e4d8bc}
.score-box{border:2px solid var(--black);background:#fbf7ee;padding:14px 16px;margin-top:14px}
.score-box strong{font-size:1.6rem;font-family:Georgia,serif}
.callout h3,.callout h4{margin:0 0 8px;font-size:1.05rem;color:var(--ink)}
.callout p{margin:0 0 8px}
.callout p:last-child{margin-bottom:0}
.art-compare{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:2px solid var(--black);
  margin:18px 0;
}
.art-compare>div{padding:14px 16px}
.art-compare>div+div{border-left:1px dotted var(--line)}
.art-compare h4{
  margin:0 0 8px;font:700 .78rem "Courier New",monospace;
  text-transform:uppercase;letter-spacing:.08em
}
.art-compare .yes h4{color:#1f5b29}
.art-compare .no h4{color:#8a1e1e}
.art-compare ul{margin:0;padding-left:18px}
.art-compare li{margin-bottom:6px}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}
.card-grid .paperbox{margin-bottom:0}
.card-grid h4{margin:0 0 6px;font-size:1rem}
.card-grid p{margin:0;color:var(--muted);font-size:.92rem}
.art-cta{
  border-top:4px double var(--black);
  border-bottom:4px double var(--black);
  padding:22px 0;
  margin:28px 0 20px;
  text-align:center;
}
.art-cta .kicker{display:block;margin-bottom:6px}
.art-cta h2{margin:0 0 10px;font-size:clamp(1.5rem,3.4vw,2.2rem)}
.art-cta p{max-width:640px;margin:0 auto 14px;color:var(--muted)}
.art-cta .stamp{margin-top:6px}
.art-figure{
  float:right;width:220px;margin:0 0 14px 20px;
  border:1px solid var(--line);background:#f4ecda;padding:8px;
}
.art-figure img{display:block;width:100%;height:auto}
.art-figure figcaption{
  font:.7rem "Courier New",monospace;text-transform:uppercase;
  color:var(--muted);margin-top:6px;text-align:center
}

@media(max-width:960px){
  .layout{grid-template-columns:1fr}
  .article-grid{grid-template-columns:1fr 1fr}
  .card-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .art-compare{grid-template-columns:1fr}
  .art-compare>div+div{border-left:0;border-top:1px dotted var(--line)}
  .card-grid{grid-template-columns:1fr}
  .art-figure{float:none;width:auto;margin:0 0 14px}
}
@media(max-width:820px){
  .columns{column-count:1}
  .formgrid{grid-template-columns:1fr}
  .full{grid-column:auto}
  .article-grid{grid-template-columns:1fr}
}

.math-help{
  margin-top:22px;
  border:4px double var(--black);
  background:#f0e6cf;
  padding:18px;
}
.math-help h2{margin-top:0}
.math-help .controls{margin-top:10px}
.math-modal{
  position:fixed;
  inset:0;
  background:rgba(20,18,15,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:9999;
}
.math-modal.open{display:flex}
.math-window{
  width:min(760px,96vw);
  max-height:88vh;
  overflow:auto;
  background:var(--paper);
  border:4px double var(--black);
  box-shadow:10px 10px 0 rgba(0,0,0,.35);
}
.math-window-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-bottom:2px solid var(--black);
  background:#e5dac2;
  font:700 .8rem "Courier New",monospace;
  text-transform:uppercase;
}
.math-window-body{padding:18px}
.math-line{
  border-bottom:1px dotted var(--line);
  padding:10px 0;
}
.math-line:last-child{border-bottom:0}
.formula{
  font-family:"Courier New",monospace;
  background:#eee4cf;
  border:1px solid var(--line);
  padding:8px;
  margin-top:6px;
}
.feedback-box{
  margin-top:16px;
  padding-top:14px;
  border-top:2px solid var(--black);
}
.feedback-box textarea{min-height:110px}