html{color-scheme: light only;}
:root{
  color-scheme: light only;
  --bg: #EDF2F0;
  --bg-alt: #E1E9E4;
  --ink: #16241F;
  --teal: #154D4A;
  --teal-dark: #0E3532;
  --mustard: #E0A526;
  --mustard-dark: #B9860F;
  --line: #C7D3CC;
  --white: #FBFCFA;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Source Serif 4', serif;
  --mono: 'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.65;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:40px 40px;
  background-attachment:fixed;
}

a{color:var(--teal); text-decoration-thickness:1px; text-underline-offset:3px;}
a:hover{color:var(--mustard-dark);}
a:focus-visible, button:focus-visible{outline:3px solid var(--mustard); outline-offset:2px;}

img{max-width:100%; display:block;}

.wrap{max-width:760px; margin:0 auto; padding:0 24px;}

/* Header */
header.site{
  background:var(--teal-dark);
  color:var(--white);
  border-bottom:4px solid var(--mustard);
}
.header-inner{
  max-width:760px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
.logo{
  font-family:var(--display); font-weight:700; font-size:1.4rem; color:var(--white);
  text-decoration:none; display:flex; align-items:center; gap:8px;
}
.logo .dot{color:var(--mustard);}
nav.site ul{list-style:none; display:flex; gap:20px; flex-wrap:wrap;}
nav.site a{
  color:var(--white); font-family:var(--mono); font-size:0.82rem;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none; opacity:.88;
}
nav.site a:hover{opacity:1; color:var(--mustard);}

/* Hero */
.hero{padding:56px 0 40px; border-bottom:1px solid var(--line);}
.hero .eyebrow{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal); display:inline-block; margin-bottom:14px;
  border:1px solid var(--teal); padding:3px 10px; border-radius:2px;
}
.hero h1{
  font-family:var(--display); font-size:clamp(2rem, 5vw, 2.9rem); line-height:1.08;
  font-weight:700; color:var(--teal-dark); margin-bottom:16px; letter-spacing:-.01em;
}
.hero p.lede{font-size:1.15rem; max-width:56ch; color:#33463F;}

/* Article list */
.list{padding:36px 0 64px;}
.list h2.section-title{
  font-family:var(--mono); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--teal); margin-bottom:20px; border-bottom:1px solid var(--line); padding-bottom:10px;
}
.card{
  display:block; background:var(--white); border:1px solid var(--line);
  border-radius:4px; padding:22px 24px; margin-bottom:16px; text-decoration:none;
  color:inherit; transition:border-color .15s ease, transform .15s ease;
  position:relative; overflow:hidden;
}
.card:before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--mustard);
  transform:scaleY(0); transform-origin:bottom; transition:transform .2s ease;
}
.card:hover{border-color:var(--teal); transform:translateX(2px);}
.card:hover:before{transform:scaleY(1);}
.card .tag{
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--mustard-dark);
}
.card h3{font-family:var(--display); font-size:1.3rem; color:var(--teal-dark); margin:8px 0 6px;}
.card p{color:#3E4E48; font-size:.98rem;}

/* Article page */
.article-head{padding:44px 0 24px; border-bottom:1px solid var(--line);}
.article-head .tag{
  font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--mustard-dark);
}
.article-head h1{
  font-family:var(--display); font-size:clamp(1.8rem,4.5vw,2.5rem); color:var(--teal-dark);
  margin:10px 0 14px; line-height:1.12;
}
.meta{font-family:var(--mono); font-size:.82rem; color:#5B6D66;}

.article-body{padding:36px 0 20px;}
.article-body p{margin-bottom:20px; max-width:66ch;}
.article-body h2{
  font-family:var(--display); font-size:1.5rem; color:var(--teal-dark); margin:36px 0 14px;
}
.article-body ul, .article-body ol{margin:0 0 22px 1.3em; max-width:64ch;}
.article-body li{margin-bottom:8px;}

/* Numbered step rail — legit here because these are real sequential steps */
.steps{list-style:none; margin:0 0 30px; padding:0; max-width:66ch;}
.steps li{
  position:relative; padding:4px 0 22px 46px; border-left:2px solid var(--line);
}
.steps li:last-child{border-left:2px solid transparent;}
.steps li .num{
  position:absolute; left:-19px; top:0; width:36px; height:36px; border-radius:50%;
  background:var(--teal); color:var(--white); font-family:var(--mono); font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  border:3px solid var(--bg);
}
.steps li h4{font-family:var(--display); font-size:1.05rem; color:var(--teal-dark); margin-bottom:4px;}
.steps li p{margin:0; color:#3E4E48; font-size:.97rem;}

code, .kbd{
  font-family:var(--mono); background:var(--bg-alt); border:1px solid var(--line);
  border-radius:3px; padding:1px 6px; font-size:.88em;
}

.callout{
  background:var(--white); border:1px solid var(--line); border-left:4px solid var(--mustard);
  padding:16px 20px; margin:0 0 24px; border-radius:3px; max-width:64ch; font-size:.96rem;
}

/* Ad slots — clearly marked so you know where to paste AdSense code */
.ad-slot{
  max-width:66ch; margin:32px 0; padding:14px; border:1px dashed var(--line);
  background:var(--bg-alt); text-align:center; font-family:var(--mono);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#5B6D66; border-radius:3px;
}

/* Footer */
footer.site{
  border-top:1px solid var(--line); padding:36px 0 48px; margin-top:20px;
}
footer.site .wrap{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-family:var(--mono); font-size:.8rem; color:#5B6D66;
}
footer.site a{color:#5B6D66;}
footer.site a:hover{color:var(--teal);}

@media (max-width:600px){
  body{font-size:17px;}
  .header-inner{flex-direction:column; align-items:flex-start;}
}