/* The Safety Newsletter — shared site styles.
   Text-first "reader mode" aesthetic; deliberately mirrors the email design
   (serif body, safety-green accent, one column, almost no chrome).
   v1 — 2026-07-16 */

:root{
  --page:#eceeec; --paper:#ffffff; --ink:#18211c; --muted:#667069;
  --accent:#14663a; --hair:#e4e8e5; --foot:#7a807b; --shadow:rgba(20,40,28,.07);
}
@media (prefers-color-scheme:dark){
  :root{
    --page:#0d0f11; --paper:#16191b; --ink:#e7eae7; --muted:#98a09a;
    --accent:#5cc489; --hair:#262b28; --foot:#8a918b; --shadow:rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  font-size:18px; line-height:1.65;
}
.wrap{max-width:640px;margin:0 auto;padding:0 16px}
.sheet{
  background:var(--paper); border:1px solid var(--hair); border-radius:3px;
  padding:44px 40px; margin:28px 0; box-shadow:0 1px 24px var(--shadow);
}
.sans{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif}
p{margin:0 0 18px}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* masthead */
.masthead{text-align:center;border-bottom:2px solid var(--accent);padding-bottom:18px;margin-bottom:26px}
.mast-title{font-size:34px;font-weight:bold;letter-spacing:.5px;margin:0;text-wrap:balance;line-height:1.15}
.mast-title a{color:inherit;text-decoration:none}
.mast-tag{font-style:italic;color:var(--muted);font-size:16px;margin:10px 0 0}
.mast-meta{text-transform:uppercase;letter-spacing:2.5px;font-size:11px;color:var(--accent);margin:12px 0 0}

/* section labels + headings */
.label{
  display:block;text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:bold;
  color:var(--accent);border-top:1px solid var(--hair);padding-top:24px;margin-top:30px;
}
h2.head{font-size:25px;line-height:1.24;margin:10px 0 4px;font-weight:bold;text-wrap:balance}
.meta{font-size:13px;color:var(--muted);margin:0 0 15px}
.kicker{font-weight:bold}
.lede{font-size:20px;line-height:1.55}

/* subscribe form */
.subscribe{border-top:1px solid var(--hair);margin-top:30px;padding-top:26px}
.field{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
input[type=email]{
  flex:1 1 240px;min-width:0;padding:13px 14px;font-size:16px;
  font-family:inherit;color:var(--ink);background:var(--paper);
  border:1px solid var(--hair);border-radius:3px;
}
button{
  padding:13px 20px;font-size:15px;font-weight:600;cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:3px;
}
button:hover{opacity:.9}
button[disabled]{opacity:.55;cursor:default}
.form-note{font-size:13px;color:var(--muted);margin:0}
.msg{font-size:15px;margin:12px 0 0;min-height:1.2em}
/* Collapse the status line while it has nothing to say. min-height above reserves a line so the page
   doesn't jump when a message appears — but at rest that reserved line reads as a gap under the form.
   Not display:none: the element must stay rendered for aria-live to announce into it. */
.msg:empty{margin:0;min-height:0}
.msg.ok{color:var(--accent);font-weight:600}
.msg.err{color:#b3261e}
@media (prefers-color-scheme:dark){.msg.err{color:#ef9a93}}

/* archive list */
.issue-list{list-style:none;padding:0;margin:0}
.issue-list li{border-top:1px solid var(--hair);padding:20px 0}
.issue-list li:first-child{border-top:0;padding-top:4px}
.issue-no{text-transform:uppercase;letter-spacing:2px;font-size:11px;color:var(--accent);font-weight:bold}
.issue-title{font-size:21px;font-weight:bold;margin:5px 0 4px;line-height:1.3}
.issue-title a{text-decoration:none;color:var(--ink)}
.issue-title a:hover{color:var(--accent)}
.issue-dek{font-size:15px;color:var(--muted);margin:0}

.backlink{font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:0 0 22px;display:block}
/* compact source / "read more" link — one shared treatment for Dispatch and the Calendar */
.src{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;font-size:13px;
  letter-spacing:.3px;font-weight:600;white-space:nowrap;}
.dispatch-item{margin:0 0 16px}
.cal-item{margin:0 0 18px}
.cal-item:last-child{margin-bottom:0}
.quote{font-size:22px;font-style:italic;text-align:center;line-height:1.4;margin:8px 16px 12px}
.signoff{font-style:italic;color:var(--muted);margin:0 0 6px}

/* footer */
.foot{
  border-top:2px solid var(--accent);margin-top:34px;padding-top:20px;
  font-size:12.5px;color:var(--foot);line-height:1.65;text-align:center;
}
.foot a{color:var(--foot)}
.sitefoot{text-align:center;font-size:12.5px;color:var(--foot);padding:0 0 40px}
.sitefoot a{color:var(--foot)}

@media (max-width:520px){
  body{font-size:17px}
  .sheet{padding:28px 20px;margin:16px 0}
  .mast-title{font-size:27px}
  h2.head{font-size:22px}
  .lede{font-size:18px}
}