:root{
  --paper:#F2EEE3; --paper-deep:#EAE4D4; --ink:#1B1B18;
  --navy:#1F2E45; --navy-deep:#16212F;
  --bronze:#7C5A32; --bronze-lt:#9C7B4E;
  --slate:#5B6472; --line:#D8D2C2;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Public Sans',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
.serif{font-family:'Fraunces',Georgia,serif}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1120px,calc(100% - 48px));margin:0 auto}
.narrow{width:min(680px,calc(100% - 48px));margin:0 auto}

header{position:sticky;top:0;z-index:50;background:rgba(242,238,227,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.brand-name{font-family:'Fraunces',serif;font-size:20px;font-weight:500;text-decoration:none}
.menu{display:flex;align-items:center;gap:28px}
.menu a{font-size:13.5px;text-decoration:none;color:var(--ink);opacity:.75}
.menu a:hover{opacity:1}

.sec-note{font-size:13px;color:var(--bronze);font-style:italic;font-family:'Fraunces',serif}
.page-head{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.page-head h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;margin-top:14px}

.article-list{border-top:1px solid var(--line)}
.article-row{display:grid;grid-template-columns:1fr 2fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.article-row h3{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:500}
.article-row p{font-size:14.5px;color:var(--slate);max-width:56ch;margin-top:6px}
@media(max-width:720px){.article-row{grid-template-columns:1fr;gap:8px}}

.article-body{max-width:680px;margin:40px auto 80px;padding:0 24px}
.article-body p{font-size:1.05rem;line-height:1.8;margin-bottom:20px;color:#2a2a26}
.article-meta{font-size:13px;color:var(--slate);margin-top:10px}

.btn{display:inline-block;font-size:13.5px;padding:12px 22px;border:1px solid var(--navy);text-decoration:none;color:var(--ink);background:none;cursor:pointer;font-family:inherit}
.btn-solid{background:var(--navy);color:var(--paper)}
.btn-solid:hover{background:var(--navy-deep)}
.btn-ghost:hover{background:var(--navy);color:var(--paper)}
.btn-danger{border-color:#9a3b2f;color:#9a3b2f}
.btn-danger:hover{background:#9a3b2f;color:var(--paper)}

/* STAFF FORMS */
.staff-card{background:#fff;border:1px solid var(--line);padding:36px;max-width:480px;margin:70px auto}
.staff-card h1{font-family:'Fraunces',serif;font-weight:400;font-size:1.7rem;margin-bottom:24px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;color:var(--slate);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:11px 14px;border:1px solid var(--line);background:var(--paper);font-family:inherit;font-size:15px;color:var(--ink)}
.field textarea{min-height:260px;resize:vertical;line-height:1.6}
.error-msg{background:#f6e4e0;border:1px solid #d9b3a8;color:#7a2e1f;padding:12px 16px;font-size:13px;margin-bottom:18px}
.ok-msg{background:#e9f0e4;border:1px solid #b9d2a8;color:#2f5a1f;padding:12px 16px;font-size:13px;margin-bottom:18px}

.dash-table{width:100%;border-collapse:collapse;margin-top:24px}
.dash-table th{text-align:left;font-size:12px;color:var(--slate);text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;border-bottom:1px solid var(--line)}
.dash-table td{padding:14px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.badge{font-size:11px;padding:3px 9px;border:1px solid var(--line);display:inline-block}
.badge-pub{color:#2f5a1f;border-color:#b9d2a8;background:#f2f6ee}
.badge-draft{color:var(--slate)}
.dash-actions a{font-size:13px;margin-right:14px;color:var(--bronze);text-decoration:none}
.dash-actions a.danger{color:#9a3b2f}

footer{padding:48px 0;border-top:1px solid var(--line);font-size:13px;color:var(--slate)}

@media(max-width:700px){
  .nav{flex-wrap:wrap;gap:14px;padding:16px 0}
  .menu{flex-wrap:wrap;gap:14px}
  .menu a{font-size:12.5px}
  .page-head{padding:44px 0 32px}
  .article-row{grid-template-columns:1fr}
}