:root{
  --ink:#17181A;
  --ink-soft:#1E2022;
  --ink-softer:#26282B;
  --stone:#E4E2DC;
  --stone-soft:#EDEBE5;
  --text-dark:#1B1C1D;
  --text-light:#F3F1EC;
  --muted:#6E6E71;
  --muted-light:#A6A6AA;
  --brass:#9C7A3C;
  --brass-light:#C6A868;
  --border-dark:rgba(23,24,26,0.14);
  --border-light:rgba(243,241,236,0.14);
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--stone-soft);
  color:var(--text-dark);
  font-family:'Manrope',sans-serif;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:500;
  line-height:1.12;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}
section{padding:96px 0;}

/* ---------- Mark / logo ---------- */
.brand{display:flex;align-items:center;gap:12px;}
.mark{
  width:38px;height:38px;flex:none;
  background:var(--stone-soft);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:15px;
  letter-spacing:0.01em;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:17px;
  color:var(--text-light);
}
.brand-sub{
  font-size:10px;
  letter-spacing:0.16em;
  color:var(--muted-light);
  margin-top:2px;
}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(23,24,26,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-light);
}
header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;
}
nav{display:flex;align-items:center;gap:36px;}
nav a{
  font-size:14px;color:var(--muted-light);
  transition:color .2s ease;
  position:relative;
}
nav a:hover{color:var(--text-light);}
.nav-cta{
  color:var(--text-light) !important;
  border:1px solid var(--border-light);
  padding:9px 18px;
  font-size:13px;
}
.nav-cta:hover{border-color:var(--brass-light);color:var(--brass-light) !important;}
.menu-btn{
  display:none;background:none;border:0;color:var(--text-light);
  width:32px;height:32px;cursor:pointer;padding:0;
}
.menu-btn span{display:block;width:20px;height:1px;background:currentColor;margin:5px auto;transition:transform .2s ease, opacity .2s ease;}

/* ---------- Buttons / labels ---------- */
.btn{
  display:inline-block;
  background:var(--brass);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:14px;
  padding:15px 28px;
  border:1px solid var(--brass);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{background:transparent;color:var(--brass-light);border-color:var(--brass-light);}
.btn-ghost{background:transparent;color:var(--text-light);border:1px solid var(--border-light);}
.btn-ghost:hover{border-color:var(--text-light);}
.label{font-size:13px;color:var(--brass);font-weight:700;margin-bottom:18px;}
.label.on-dark{color:var(--brass-light);}

/* ---------- Footer ---------- */
footer{background:var(--ink-soft);color:var(--muted-light);padding:44px 0;}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
footer .foot-meta{font-size:13px;text-align:right;line-height:1.6;}

/* ---------- Shared page header (articles + listing) ---------- */
.page-hero{background:var(--ink);color:var(--text-light);padding:100px 0 60px;}
.page-hero .label{margin-bottom:20px;}
.page-hero h1{font-size:clamp(30px,4.2vw,46px);max-width:22ch;color:var(--text-light);}
.page-hero p.dek{margin-top:20px;max-width:52ch;color:var(--muted-light);font-size:16px;}
.page-hero .meta{margin-top:22px;color:var(--muted-light);font-size:13px;letter-spacing:.04em;}

/* ---------- Article prose ---------- */
.prose{max-width:66ch;margin:0 auto;padding:72px 32px 120px;}
.prose .back{display:inline-block;margin-bottom:36px;font-size:14px;color:var(--muted);}
.prose .back:hover{color:var(--brass);}
.prose p{margin-top:20px;font-size:17px;color:#2A2B2C;}
.prose p:first-of-type{margin-top:0;}
.prose h2{font-size:23px;margin-top:52px;margin-bottom:6px;}

/* ---------- Articles list ---------- */
.list-wrap{padding:16px 0 120px;}
.article-card{display:block;padding:34px 0;border-bottom:1px solid var(--border-dark);}
.article-card:first-child{border-top:1px solid var(--border-dark);}
.article-card .a-date{font-size:12px;letter-spacing:.08em;color:var(--muted);}
.article-card h2{font-size:22px;margin-top:10px;transition:color .2s ease;}
.article-card:hover h2{color:var(--brass);}
.article-card p{margin-top:10px;color:#3A3B3C;font-size:15px;max-width:62ch;}
.empty-state{padding:40px 0;color:var(--muted);font-size:15px;}

/* ---------- Responsive shared ---------- */
@media (max-width:720px){
  nav{
    position:absolute;top:76px;left:0;right:0;
    background:var(--ink);border-bottom:1px solid var(--border-light);
    flex-direction:column;align-items:flex-start;gap:0;
    max-height:0;overflow:hidden;
    transition:max-height .25s ease;
  }
  nav.open{max-height:320px;}
  nav a{width:100%;padding:16px 32px;border-top:1px solid var(--border-light);}
  .nav-cta{border:0 !important;}
  .menu-btn{display:block;}
  .wrap{padding:0 22px;}
  section{padding:72px 0;}
}