/* HSE 4 CEO — minimal, fast, offline; safety-tape palette */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#5c5c5c;
  --ink:#111111;        /* black */
  --graphite:#333333;
  --line:#e6e6e6;
  --yellow:#FFD400;     /* primary safety yellow */
  --amber:#E6B800;      /* deeper amber */
  --space: clamp(16px, 2vw, 24px);
  --max: 900px;
  --radius: 8px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-size:16px}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max);padding:0 var(--space);margin:0 auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--space);display:flex;align-items:center;justify-content:space-between}
.skip{position:absolute;left:-9999px}
.skip:focus{left:0;top:0;background:#fff;padding:8px;border:1px solid var(--line);z-index:1000}

.topbar{background:var(--yellow); border-bottom:4px solid var(--ink)}
.topbar .contact a{font-weight:600}
.topbar .sep{margin:0 .5rem;color:var(--graphite)}

.site-header{border-bottom:1px solid var(--line);position:sticky;top:40px;background:#fff;z-index:5}
.brand{display:flex;align-items:center;font-weight:800;font-size:1.05rem;color:var(--ink)}
.brand .logo{margin-right:.5rem}
.nav{display:flex;gap:1rem}
.nav-link{padding:.9rem .25rem;color:var(--graphite)}
.nav-link.active, .nav-link:hover{color:var(--ink);border-bottom:3px solid var(--yellow)}

.hero{padding: calc(var(--space)*2) 0; border-bottom: 6px solid var(--yellow); background:linear-gradient(180deg,#fff 0%, #fff 70%, #fff3bf 100%)}
.hero h1{font-size:clamp(1.8rem, 3.6vw, 3rem);line-height:1.15;margin:0 0 .5rem 0;color:var(--ink)}
.lede{font-size:1.125rem;color:var(--graphite);max-width:52ch}
.cta{margin-top:1rem;display:flex;gap:.75rem;flex-wrap:wrap}
.btn{display:inline-block;border:2px solid var(--ink);padding:.6rem .9rem;border-radius:var(--radius);font-weight:800;background:var(--yellow)}
.btn.ghost{border-color:var(--graphite);color:var(--ink);background:#fff}
.btn:hover{filter:brightness(0.95)}
.btn.ghost:hover{background:#f6f6f6}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space);padding: var(--space) 0 var(--space) 0}
.grid3 h3{margin:.25rem 0;color:var(--ink);border-left:6px solid var(--yellow);padding-left:.5rem}
.grid3 p{color:var(--graphite);margin:.25rem 0 0 0}

.content{padding: var(--space) 0}
.content h1{margin:.5rem 0 1rem 0;color:var(--ink)}
.prose p{margin:.8rem 0}
.prose ul{padding-left:1.1rem}
.prose li{margin:.3rem 0}
.small{font-size:.9rem}
.muted{color:#666}

.postlist{list-style:none;padding:0;margin:1rem 0}
.postlist li{padding:.75rem 0;border-bottom:1px dashed #ddd}

.upload{border:3px dashed var(--amber);padding:1rem;border-radius:10px;background:#fffef4}
.upload input[type=file]{margin-right:.5rem}
.upload button{margin-top:.5rem}

.site-footer{border-top:6px solid var(--yellow);margin-top: calc(var(--space)*2);padding: var(--space) 0;color:var(--graphite);font-size:.95rem;background:#fafafa}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.5rem;align-items:center}