/* 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:#e9dcc2;
  --paper2:#dfcfaf;
  --ink:#1f1b16;
  --muted:#5b554d;
  --line:#8a7f70;
  --black:#151515;
  --accent:#7f1d1d;
}
*{box-sizing:border-box}
html{
  width:100%;max-width:100%;font-size:23px;
  overflow-x:hidden;overscroll-behavior-x:none;
}
body{
  margin:0;
  width:100%;max-width:100%;overflow-x:hidden;
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.25rem;
  line-height:1.68;
  background:
    linear-gradient(rgba(105,74,39,.18),rgba(105,74,39,.26)),
    url('/free-help/assets/oakvision-newsroom-collage.png') center top/cover fixed,
    var(--paper);
}
/* Real reading copy -- this is the text people are actually here to read.
   Every paragraph inside an article box or department section must be big
   and comfortable, not an afterthought next to the decorative callouts.
   2026-08-17 ROUND 2: Cap says it still reads small site-wide, not just
   here -- html base 20px->23px, every rule below bumped again on top. */
.paperbox p,
.dept-head + .paperbox p,
.art-cta p,
.callout p,
.term-box .why,
.tool-card p{
  font-size:1.3rem !important;
  line-height:1.68 !important;
}
.lead{font-size:1.44rem !important;line-height:1.6 !important}
.subhead{font-size:1.36rem !important;line-height:1.55 !important}
.pullquote{font-size:1.48rem !important}
h2{font-size:1.7rem !important}
h3,.tool-card h3,.article-card h3{font-size:1.4rem !important}
h4,.callout h3,.callout h4,.art-compare h4,.card-grid h4{font-size:1.18rem !important}
.wrap{width:min(1800px,96vw);margin:auto}
body>.wrap{
  background-image:
    linear-gradient(rgba(233,220,194,.78),rgba(233,220,194,.86)),
    url('/free-help/assets/oakvision-newsroom-collage.png');
  background-size:auto,cover;
  background-position:center top;
  background-attachment:scroll,fixed;
  background-blend-mode:normal,multiply;
  box-shadow:0 0 70px rgba(48,28,12,.34);
}
/* 2026-08-22: the masthead used to be a flat #c6b181 slab sitting on top of
   the collage-textured .wrap, which read as a separate band stacked above the
   page instead of part of it. It now carries the same collage as the wrap and
   the hero, so nameplate, sub-mast, edition strip, and hero read as one
   continuous piece of paper. */
.mast{
  background-image:
    linear-gradient(rgba(233,220,194,.72),rgba(233,220,194,.82)),
    url('/free-help/assets/oakvision-newsroom-collage.png');
  background-size:auto,cover;
  background-position:center top;
  background-attachment:scroll,fixed;
  background-blend-mode:normal,multiply;
  box-shadow:inset 0 0 80px rgba(74,45,18,.14);
}
.masthead-art{
  mix-blend-mode:darken;
  filter:grayscale(1) sepia(.08) saturate(.68) contrast(1.12);
  transform:scaleX(1.18);
  transform-origin:center;
}

/* 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;
  position:relative;
}
/* 2026-08-19 (corrected): this is a newspaper. The Gazette nameplate is
   the paper's own identity and must dominate the masthead. EAS is the
   publisher/sponsor -- small credit mark, top-right corner, same way a
   real paper prints its parent company or wire-service credit, not a
   competing logo fighting the nameplate for attention. */
.mast-logo{
  position:absolute;
  top:12px;
  right:clamp(14px,3vw,32px);
  height:26px;
  width:auto;
}
@media(max-width:700px){
  .mast-logo{position:static;display:block;margin:0 auto 8px;height:24px}
}
.kicker{
  font:.72rem "Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.18em;
}
.papername{
  font-family:"Times New Roman",Georgia,serif;
  font-size:clamp(3.5rem,9vw,6.6rem);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.03em;
  margin:6px 0;
}
/* 2026-09-15 (corrected again): the 2026-08-19 call above made this image
   the single biggest thing on every page it appears on -- Captain's word
   was it's "in your face" on every page, and on a working page like /combos/
   it pushed the actual content (the deals) below a giant logo for no
   reason. Reader gets the mast-logo + sub-mast identity strip and the nav
   right under it; the big nameplate art is off. Not deleting the img tags
   site-wide (100 files) -- this one rule controls all of them. */
.masthead-art{display:none}
.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
}
/* 2026-08-19: sub-mast line under the papername -- the "what this actually
   is" statement, plus the sponsor credit. Sits between .papername and
   .edition on every page that includes it. */
.sub-mast{
  text-align:center;
  margin:2px 0 8px;
}
.sub-mast .sub-mast-line{
  display:block;
  font:700 .92rem "Courier New",monospace;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--accent);
}
.sub-mast .sub-mast-sponsor{
  display:block;
  margin-top:2px;
  font:italic .78rem Georgia,serif;
  color:var(--muted);
  text-transform:none;
  letter-spacing:0;
}

.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-family:Georgia,"Times New Roman",serif;
  font-weight:900;
  font-size:clamp(2.2rem,4.6vw,3.5rem);
  line-height:1;
  margin:0 0 10px;
}
/* 2026-08-22: old-typewriter treatment for headers + buttons only --
   body copy (p, .paperbox, .subhead, etc.) stays on the Georgia serif
   so long-form reading is unaffected. */
h1,h2,h3,h4,h5,h6,
.dept-head,.headline,
.article-card h3,.tool-card h3,.callout h3,.callout h4,
.oakdale-rail-head h2,.volunteer-head h2{
  font-family:Georgia,"Times New Roman",serif !important;
}
.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;justify-content:flex-start;text-align:left}
.controls a{
  display:inline-block;
  border:1px solid var(--black);
  background:#ece2cb;
  color:var(--ink);
  padding:9px 13px;
  font:700 .74rem "Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-decoration:none;
  text-align:center;
}
.controls a:hover{background:#e4d8bc}
.controls a.download{background:transparent;border-style:dashed}
.controls a.download:hover{background:rgba(0,0,0,.05)}
.tool-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.3);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
}
.tool-card h3{margin:0;font-size:1.32rem;line-height:1.2}
.tool-card p{margin:0;color:var(--muted);font-size:1.04rem}
.tool-card .section-tag{
  font:700 .68rem "Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--accent);
}
.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:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  border-top:0;
  border-bottom:0;
  margin:18px 0 24px;
}
.paper-tabs a{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:17px 8px;
  font:900 1.18rem "Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#fff;
  background:var(--black,#17191b);
  text-decoration:none;
  border:2px solid var(--black,#17191b);
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.08;
}
.paper-tabs a:hover{background:var(--accent,#a84034);border-color:var(--accent,#a84034)}
.paper-tabs a.current{background:var(--accent,#a84034);border-color:var(--accent,#a84034);color:#fff}
@media(max-width:820px){
  .paper-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 2026-08-19: MORE dropdown -- houses the admin/utility pages (obits,
   legal notices, submit forms, advertise, archives, about) so the primary
   tab row stays reader-facing sections only. Built on <details>/<summary>
   so it needs no JS. */
.paper-more{position:relative;min-width:0}
.paper-more > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:17px 8px;
  font:900 1.18rem "Courier New",monospace;text-transform:uppercase;letter-spacing:.02em;
  color:#fff;background:var(--black,#17191b);border:2px solid var(--black,#17191b);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.paper-more > summary::-webkit-details-marker{display:none}
.paper-more > summary:hover{background:var(--accent,#a84034);border-color:var(--accent,#a84034)}
.paper-more[open] > summary{background:var(--accent,#a84034);border-color:var(--accent,#a84034)}
/* 2026-08-19: county-wide cities dropdown, replaces the single "Oakdale"
   tab. Same details/summary pattern as .paper-more but left-aligned
   (it's the second tab, not the last) and can carry .current like a
   normal tab when the visitor is actually on a city page. */
.paper-cities{position:relative;min-width:0}
.paper-cities > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:17px 8px;
  font:900 1.18rem "Courier New",monospace;text-transform:uppercase;letter-spacing:.02em;
  color:#fff;background:var(--black,#17191b);border:2px solid var(--black,#17191b);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.paper-cities > summary::-webkit-details-marker{display:none}
.paper-cities > summary:hover{background:var(--accent,#a84034);border-color:var(--accent,#a84034)}
.paper-cities[open] > summary{background:var(--accent,#a84034);border-color:var(--accent,#a84034)}
.paper-cities.current > summary{background:var(--accent,#a84034);border-color:var(--accent,#a84034)}
.paper-cities-panel{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;
  display:flex;flex-direction:column;
  min-width:240px;
  background:var(--paper);
  border:2px solid var(--black);
  box-shadow:0 14px 32px rgba(0,0,0,.28);
}
.paper-cities-panel a{
  flex:none;
  min-width:0;
  text-align:left;
  padding:12px 16px;
  font:700 .92rem Georgia,serif;
  text-transform:none;
  letter-spacing:normal;
  color:var(--ink) !important;
  background:var(--paper) !important;
  text-decoration:none;
  border:0;
  border-bottom:1px solid var(--line);
  white-space:normal;
}
.paper-cities-panel a:last-child{border-bottom:0}
.paper-cities-panel a:hover{background:var(--paper2) !important;color:var(--accent) !important}
.paper-cities-panel a.county-wide{font-weight:900;background:var(--paper2) !important}
@media(max-width:820px){
  .paper-cities-panel{left:0;right:0;min-width:0}
}

.paper-more-panel{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  display:flex;flex-direction:column;
  min-width:220px;
  background:var(--paper);
  border:2px solid var(--black);
  box-shadow:0 14px 32px rgba(0,0,0,.28);
}
.paper-more-panel a{
  flex:none;
  min-width:0;
  text-align:left;
  padding:12px 16px;
  font:700 .92rem Georgia,serif;
  text-transform:none;
  letter-spacing:normal;
  color:var(--ink) !important;
  background:var(--paper) !important;
  text-decoration:none;
  border:0;
  border-bottom:1px solid var(--line);
  white-space:normal;
}
.paper-more-panel a:last-child{border-bottom:0}
.paper-more-panel a:hover{background:var(--paper2) !important;color:var(--accent) !important}
@media(max-width:820px){
  .paper-more-panel{left:0;right:0;min-width:0}
}
/* 2026-08-19: shared "coming soon" state for new section landing pages
   (Today, Oakdale, Business, Events, Sports & Schools, Public Record)
   that don't have real stories in them yet. */
.section-coming-soon{
  border:2px dashed var(--line);
  background:rgba(255,255,255,.25);
  padding:clamp(40px,8vw,80px) 24px;
  text-align:center;
  margin:20px 0 40px;
}
.section-coming-soon .kicker{display:block;margin-bottom:10px;color:var(--accent)}
.section-coming-soon h2{margin:0 0 10px;font-size:clamp(1.6rem,4vw,2.4rem)}
.section-coming-soon p{max-width:620px;margin:0 auto 6px;color:var(--muted);font-size:1.05rem !important}
.section-coming-soon .sc-note{font-size:.92rem !important;font-style:italic}

@media(max-width:480px){
  .paper-tabs{grid-template-columns:1fr}
}

/* 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.32rem;line-height:1.2}
.article-card p{margin:0;color:var(--muted);font-size:1.04rem}

/* 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:1.12rem}
.card-grid p{margin:0;color:var(--muted);font-size:1.04rem}
.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:.9rem "Courier New",monospace;text-transform:uppercase;
  color:var(--muted);margin-top:6px;text-align:center
}

/* Small, low-friction "drop a message" box -- for readers who don't have
   a business email and just want to say something. Only the message is
   required; name/email are optional. Posts to /eas-ask as submission_type
   "message", which is NOT subject to the public-email-domain block that
   applies to the structured business-contact form. */
.dropline{
  max-width:560px;
  margin:24px auto;
  border:1px solid var(--black);
  background:#f4ecda;
}
.dropline-head{
  padding:10px 16px;
  border-bottom:1px solid var(--line);
  font:700 .68rem "Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--accent);
}
.dropline-body{padding:16px}
.dropline-body p{margin:0 0 12px;color:var(--muted);font-size:.85rem;line-height:1.5}
.dropline-row{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.dropline-row input{flex:1;min-width:140px}
.dropline input,.dropline textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fffdf8;
  padding:9px 10px;
  font-family:inherit;
  font-size:.88rem;
  color:var(--ink);
}
.dropline textarea{min-height:80px;resize:vertical;margin-bottom:10px}
.dropline-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dropline button{
  border:2px solid var(--black);
  background:var(--black);
  color:#fff;
  padding:10px 16px;
  font:700 .76rem "Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.05em;
  cursor:pointer;
}
.dropline button:hover{background:var(--accent);border-color:var(--accent)}
.dropline button:disabled{opacity:.5;cursor:not-allowed}
.dropline-status{font-size:.78rem;color:var(--muted)}
.dropline-status.ok{color:#1f5b29;font-weight:700}
.dropline-status.err{color:#8a1e1e;font-weight:700}
.dropline input[name=fax_number]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

@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:minmax(0,1fr)!important}
  .art-compare>div+div{border-left:0;border-top:1px dotted var(--line)}
  .card-grid{grid-template-columns:minmax(0,1fr)!important}
  .art-figure{float:none;width:auto;margin:0 0 14px}
  .wrap,.layout,.paperbox,.callout,.card-grid,.art-compare,.art-compare>div,.article-card,.tool-card{min-width:0;max-width:100%}
  p,li,a,h1,h2,h3,h4{overflow-wrap:anywhere}
  .art-table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@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}

/* ---- first-visit gate popup ---- */
.gate-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(10,12,14,.82);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.gate-overlay[hidden]{display:none}
.gate-box{
  width:min(560px,100%);
  max-height:88vh;overflow-y:auto;
  background:var(--paper2,#fbf7ed);
  border:3px solid var(--black,#17191b);
  box-shadow:9px 9px 0 rgba(0,0,0,.35);
  padding:0;
}
.gate-head{
  background:var(--ink,#17191b);color:#fff;
  padding:12px 18px;
  font:900 .74rem "Courier New",monospace;
  text-transform:uppercase;letter-spacing:.1em;
}
.gate-body{padding:22px 22px 24px}
.gate-body h2{
  margin:0 0 12px;
  font-family:Impact,"Arial Black",sans-serif;
  font-size:clamp(1.5rem,4vw,2.1rem);
  line-height:1.05;
}
.gate-body p{margin:0 0 12px;font-size:.95rem;line-height:1.55}
.gate-ip{
  margin:14px 0 18px;
  padding:10px 14px;
  border:2px dashed var(--line,#b7aa91);
  background:#eee4cf;
  font:700 .82rem "Courier New",monospace;
  text-align:center;
  letter-spacing:.02em;
}
.gate-ip span{color:var(--accent,#a84034)}
.gate-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.gate-actions button{
  flex:1;min-width:150px;
  border:2px solid var(--black,#17191b);
  padding:12px 14px;
  font:700 .78rem "Courier New",monospace;
  text-transform:uppercase;letter-spacing:.05em;
  cursor:pointer;
}
.gate-agree{background:#315e48;color:#fff}
.gate-agree:hover{background:#274b3a}
.gate-disagree{background:#fbf7ed;color:var(--ink,#17191b)}
.gate-disagree:hover{background:#e7dcc4}
.gate-fine{margin-top:14px;font-size:.76rem;color:var(--muted,#61645f)}
@media(max-width:480px){.gate-actions{flex-direction:column}.gate-actions button{width:100%}}

/* ---- universal Gazette platform navigation + direct contact desk ---- */
.gazette-platform-nav-shade{
  position:sticky;top:0;z-index:88;
  width:100%;
  background:#17130f;
  border-bottom:4px double #160f09;
  box-shadow:0 7px 24px rgba(35,18,7,.32);
}
/* 2026-08-22: was full-bleed (width:100%) while every other row on the page
   (.wrap masthead, .wrap content, .wrap footer) is capped at min(1800px,96vw)
   and centered -- that mismatch is what made the nav bar's edges sit ~20px
   wider than the masthead on each side ("the bars are off"). Now the dark
   background stays full-bleed (via this wrapping shade) but the actual nav
   content is capped + centered at the same width as everything else below
   it, so all the edges line up while scrolling. */
.gazette-platform-nav{
  width:min(1800px,96vw);max-width:min(1800px,96vw);margin:0 auto;min-height:58px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;
  background:#17130f;color:#f4e7ca;
  font-family:"Courier New",monospace;
}
.gazette-platform-nav a{color:inherit;text-decoration:none}
.gazette-platform-brand{display:flex;min-width:190px;flex-direction:column;justify-content:center;padding:7px 18px;background:#7f1d1d;border-right:1px solid #a8844c}
.gazette-platform-brand strong{font:700 1rem/1 Georgia,serif}.gazette-platform-brand small{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase}
.gazette-platform-links{display:flex;min-width:0;overflow-x:auto;scrollbar-width:thin;align-items:stretch}
.gazette-platform-links a{display:grid;place-items:center;min-width:max-content;padding:0 13px;border-right:1px solid #5d5041;font-size:.8rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.gazette-platform-links a:hover,.gazette-platform-links a:focus-visible{background:#e5d5b4;color:#2b2016}
.gazette-contact-open{border:0;border-left:2px solid #c39b55;padding:8px 18px;background:#176b5f;color:#fff;font:900 .8rem/1.2 "Courier New",monospace;text-transform:uppercase;cursor:pointer;box-shadow:inset 0 0 18px rgba(255,255,255,.12)}
.gazette-contact-open:hover{background:#0f8976}
.gazette-platform-nav~.paper-tabs,
.gazette-platform-nav-shade~.paper-tabs{display:none!important}

.gazette-contact-shade{position:fixed;inset:0;z-index:9960;background:rgba(15,9,5,.7);backdrop-filter:blur(3px)}
.gazette-contact-desk{position:fixed;z-index:9970;top:50%;left:50%;width:min(720px,calc(100vw - 30px));max-height:90vh;overflow:auto;transform:translate(-50%,-50%);border:4px double #17130f;background:#e2d1ae url('/free-help/assets/oakvision-newsroom-collage.png') center/cover;color:#21170f;padding:clamp(22px,4vw,42px);box-shadow:12px 14px 0 rgba(0,0,0,.36),0 30px 80px #0008}
.gazette-contact-desk:before{content:"";position:absolute;inset:0;background:rgba(232,218,187,.86);pointer-events:none}.gazette-contact-desk>*{position:relative}
.gazette-contact-close{position:absolute;z-index:2;right:10px;top:8px;width:38px;height:38px;border:2px solid #17130f;background:#7f1d1d;color:#fff;font:900 25px/1 Arial,sans-serif;cursor:pointer}
.gazette-contact-kicker{margin:0;color:#7f1d1d;font:900 .82rem "Courier New",monospace;letter-spacing:.1em;text-transform:uppercase}.gazette-contact-desk h2{margin:8px 42px 12px 0;font:900 clamp(1.7rem,5vw,3rem)/.95 Georgia,serif!important}.gazette-contact-desk>p{font-size:.86rem!important;line-height:1.45!important}.gazette-contact-desk>p a{color:#6d1818;font-weight:900}
.gazette-contact-desk label{display:grid;gap:5px;margin:12px 0;font:900 .8rem "Courier New",monospace;text-transform:uppercase;letter-spacing:.05em}.gazette-contact-desk input,.gazette-contact-desk textarea{width:100%;border:2px solid #493b2b;background:#f6edd9;color:#1f1b16;padding:11px;font:500 .78rem/1.4 Georgia,serif;text-transform:none;letter-spacing:0}.gazette-contact-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.gazette-contact-trap{position:absolute!important;left:-9999px!important}.gazette-contact-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}.gazette-contact-actions button,.gazette-contact-actions a{border:2px solid #17130f;padding:11px 15px;background:#7f1d1d;color:#fff;text-decoration:none;font:900 .8rem "Courier New",monospace;text-transform:uppercase;cursor:pointer}.gazette-contact-actions a{background:#17130f}.gazette-contact-actions button:disabled{opacity:.6;cursor:wait}.gazette-contact-status{min-height:1.5em;margin:14px 0 0!important;color:#175a4e;font:900 .84rem/1.4 "Courier New",monospace!important}.gazette-contact-is-open{overflow:hidden}
@media(max-width:900px){.gazette-platform-nav{grid-template-columns:auto minmax(0,1fr)}.gazette-contact-open{grid-column:1/-1;min-height:38px;border-left:0;border-top:1px solid #8a6a3a}.gazette-platform-brand{min-width:150px}.gazette-platform-links a{padding-inline:10px}.gazette-contact-row{grid-template-columns:1fr}}
@media(max-width:520px){.gazette-platform-brand{min-width:124px;padding-inline:10px}.gazette-platform-brand strong{font-size:.78rem}.gazette-platform-links a{font-size:.74rem}.gazette-contact-desk{padding:22px 16px}}

/* ---- EAS full-team tab + lean-crew profile ---- */
.gazette-team-open{
  position:fixed;left:14px;top:42%;z-index:120;
  display:grid;gap:3px;max-width:190px;padding:12px 15px;
  border:2px solid #17130f;border-left:7px solid #7f1d1d;
  background:#eadbbd;color:#23170f;text-align:left;
  box-shadow:5px 6px 0 rgba(23,19,15,.35);
  font-family:"Courier New",monospace;text-transform:uppercase;cursor:pointer;
  transform:rotate(-1deg);transition:transform .18s ease,box-shadow .18s ease;
}
.gazette-team-open span{font-size:.84rem;font-weight:900;letter-spacing:.04em}
.gazette-team-open strong{font-size:.72rem;letter-spacing:.08em;color:#7f1d1d}
.gazette-team-open:hover,.gazette-team-open:focus-visible{transform:translateY(-3px) rotate(0);box-shadow:7px 9px 0 rgba(23,19,15,.4)}
.gazette-team-shade{position:fixed;inset:0;z-index:9980;background:rgba(15,9,5,.76);backdrop-filter:blur(4px)}
.gazette-team-desk{
  position:fixed;z-index:9990;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(1040px,calc(100vw - 30px));max-height:92vh;overflow:auto;
  border:5px double #17130f;background:#eadfc8;color:#21170f;
  padding:clamp(20px,4vw,42px);box-shadow:14px 16px 0 rgba(0,0,0,.38),0 30px 90px #0009;
  background-image:linear-gradient(rgba(93,65,38,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(93,65,38,.035) 1px,transparent 1px);
  background-size:100% 5px,7px 100%;
}
.gazette-team-close{position:absolute;right:10px;top:9px;width:40px;height:40px;border:2px solid #17130f;background:#7f1d1d;color:#fff;font:900 26px/1 Arial,sans-serif;cursor:pointer}
.gazette-team-kicker{margin:0;color:#7f1d1d;font:900 .86rem "Courier New",monospace;letter-spacing:.12em;text-transform:uppercase}
.gazette-team-desk h2{margin:8px 48px 10px 0;font:900 clamp(2rem,6vw,4.3rem)/.92 Georgia,serif!important;letter-spacing:-.045em}
.gazette-team-lede{max-width:820px;margin:0 0 18px!important;font:500 clamp(.9rem,2vw,1.1rem)/1.5 Georgia,serif!important}
.gazette-team-sheet{margin:0;border:3px solid #17130f;background:#fff;box-shadow:7px 8px 0 rgba(34,24,15,.2)}
.gazette-team-sheet img{display:block;width:100%;height:auto}
.gazette-team-sheet figcaption{padding:9px 12px;border-top:2px solid #17130f;background:#d7c49e;font:900 .82rem/1.4 "Courier New",monospace;text-transform:uppercase;letter-spacing:.04em}
.gazette-team-note{margin:17px 0 0!important;padding:10px 13px;border-left:6px solid #7f1d1d;background:#17130f;color:#fff;font:900 .72rem/1.45 "Courier New",monospace!important;text-transform:uppercase;letter-spacing:.04em}
.gazette-team-is-open{overflow:hidden}
@media(max-width:700px){
  .gazette-team-open{left:9px;top:auto;bottom:10px;max-width:165px;padding:9px 11px;box-shadow:3px 4px 0 rgba(23,19,15,.35)}
  .gazette-team-open span{font-size:.74rem}.gazette-team-open strong{font-size:.7rem}
  .gazette-team-desk{padding:22px 13px 18px}.gazette-team-desk h2{font-size:2.1rem}
  .gazette-team-sheet{overflow-x:auto}.gazette-team-sheet img{width:850px;max-width:none}
}
.paper-tabs > a.outreach-tab{background:#315a4b!important;color:#fff!important;border-color:#315a4b!important;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.paper-tabs > a.outreach-tab:hover{background:#24463a!important;color:#fff!important}