:root{
  --ink:#14213D;
  --paper:#F7F5EF;
  --paper-alt:#EFEBE1;
  --gold:#B8912F;
  --brick:#A83A32;
  --slate:#4B5160;
  --line:#D9D3C4;
  --white:#FFFFFF;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
h1,h2,h3{font-family:'Newsreader', serif; font-weight:500; color:var(--ink); letter-spacing:-0.01em;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brick);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{content:''; width:16px; height:1px; background:var(--brick); display:inline-block;}
:focus-visible{outline:2px solid var(--brick); outline-offset:3px;}

/* NAV */
.nav{position:sticky; top:0; z-index:50; background:rgba(247,245,239,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
.logo{display:flex; align-items:center; gap:10px;}
.logo-text{display:flex; flex-direction:column; justify-content:center; line-height:1.15;}
.logo-name{font-family:'Newsreader', serif; font-size:20px; font-weight:600; color:var(--ink);}
.logo-tagline{font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--brick); letter-spacing:0.08em; margin-top:3px;}
.nav-phone{
  font-family:'IBM Plex Mono', monospace; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:8px; font-size:14px;
  border:1px solid var(--ink); padding:9px 16px; text-decoration:none; white-space:nowrap;
}
.nav-phone:hover{background:var(--ink); color:var(--paper);}
@media (max-width:480px){
  .nav .wrap{padding:0 16px;}
  .logo-tagline{display:none;}
  .logo-name{font-size:16px;}
  .nav-phone{width:38px; height:38px; padding:0; justify-content:center; font-size:19px;}
  .nav-phone-text{display:none;}
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:15px;
  padding:15px 26px; text-decoration:none; border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--brick); color:var(--white);}
.btn-primary:hover{background:#8f2f28;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}

/* BLOG INDEX */
.blog-hero{padding:64px 0 40px; border-bottom:1px solid var(--line);}
.blog-hero h1{font-size:clamp(28px,4vw,42px); margin:14px 0 12px;}
.blog-hero p{color:var(--slate); max-width:60ch; font-size:16px;}
.blog-list{padding:56px 0 88px;}
.blog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.blog-card{background:var(--paper); padding:30px 28px; text-decoration:none; display:block;}
.blog-card:hover{background:var(--paper-alt);}
.blog-card h2{font-size:19px; margin:8px 0 10px; font-weight:600;}
.blog-card p{font-size:14px; color:var(--slate);}
@media (max-width:820px){ .blog-grid{grid-template-columns:1fr;} }

/* ARTICLE */
.article{padding:64px 0 88px;}
.article-head{max-width:74ch; margin:0 auto 40px;}
.article-head h1{font-size:clamp(28px,4vw,40px); margin:14px 0 0; line-height:1.15;}
.article-body{max-width:74ch; margin:0 auto; font-size:16.5px; color:var(--ink);}
.article-body h2{font-size:24px; margin:40px 0 16px;}
.article-body h3{font-size:19px; margin:28px 0 12px;}
.article-body p{margin-bottom:18px; color:var(--ink);}
.article-body ul, .article-body ol{margin:0 0 18px 22px;}
.article-body li{margin-bottom:8px; color:var(--ink);}
.article-body strong{color:var(--ink);}
.article-body table{width:100%; border-collapse:collapse; margin:24px 0 28px; font-size:14.5px;}
.article-body th, .article-body td{border:1px solid var(--line); padding:10px 12px; text-align:left;}
.article-body th{background:var(--paper-alt); font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.04em;}
.article-body hr{border:none; border-top:1px solid var(--line); margin:36px 0;}
.article-body em{font-size:13px; color:var(--slate); display:block; margin-top:8px;}
.article-cta{
  margin:8px 0 32px; padding:22px 26px; background:var(--white); border:1px solid var(--line); border-left:3px solid var(--brick);
}
.article-cta a{color:var(--brick); font-weight:600; text-decoration:none;}
.article-cta a:hover{text-decoration:underline;}
.back-link{display:inline-block; margin-bottom:18px; font-size:13.5px; color:var(--slate); text-decoration:none;}
.back-link:hover{color:var(--ink);}
.article-body a{color:var(--brick); text-decoration:underline;}
.article-body a:hover{color:#8f2f28;}
.related-articles{margin-top:8px; padding-top:28px; border-top:1px solid var(--line);}
.related-articles ul{list-style:none; margin:14px 0 0;}
.related-articles li{margin-bottom:10px;}
.related-articles a{color:var(--ink); font-weight:600; text-decoration:none; font-size:15px;}
.related-articles a:hover{color:var(--brick); text-decoration:underline;}

/* FOOTER */
footer{background:var(--ink); color:#B9C0D4; padding:44px 0 28px;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
footer .foot-logo{font-family:'Newsreader', serif; color:var(--paper); font-size:18px; margin-bottom:8px;}
footer p{font-size:12.5px; line-height:1.6; max-width:44ch;}
.foot-legal{font-size:11.5px; color:#7C86A6; margin-top:26px; border-top:1px solid #2A3557; padding-top:18px;}
.foot-links{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px;}
.foot-links a{color:#B9C0D4; text-decoration:underline; font-size:12px;}
.foot-links a:hover{color:var(--paper);}

.sticky-cta{display:none; position:fixed; bottom:0; left:0; right:0; z-index:60; background:var(--ink); padding:12px 16px; justify-content:space-between; align-items:center; gap:10px;}
.sticky-cta a{color:var(--paper); text-decoration:none; font-size:14px; font-weight:600;}
.sticky-cta .btn-primary{padding:11px 18px; font-size:14px;}
@media (max-width:640px){ .sticky-cta{display:flex;} body{padding-bottom:64px;} }
