:root {
  --ink:#0a2c30;
  --ink-soft:#4d676c;
  --petrol:#073b3f;
  --petrol-deep:#052f33;
  --teal:#079e9d;
  --teal-dark:#078b8a;
  --mint:#e1f6f2;
  --peach:#ffa077;
  --soft:#f2f8f7;
  --cream:#fbfcfb;
  --surface:#fff;
  --line:#e1ebeb;
  --muted:#71878c;
  --shadow-sm:0 10px 30px rgba(8,48,52,.07);
  --shadow-lg:0 28px 70px rgba(8,48,52,.14);
  --radius-sm:12px;
  --radius-md:19px;
  --radius-lg:28px;
  --shell:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--cream);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.65;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body.nav-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{color:var(--ink);line-height:1.08;letter-spacing:-.04em}
p{color:var(--ink-soft)}
::selection{color:var(--ink);background:var(--peach)}

.shell{width:min(calc(100% - 40px),var(--shell));margin-inline:auto}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.skip-link{
  position:fixed;z-index:9999;top:12px;left:12px;padding:10px 16px;
  color:var(--ink);background:#fff;border-radius:8px;transform:translateY(-160%)
}
.skip-link:focus{transform:none}
.icon{width:1.12em;height:1.12em;flex:0 0 auto}

.content-shell{min-height:55vh;padding-block:96px 90px}
.entry{max-width:860px;margin-inline:auto}
.entry__header{margin-bottom:40px}
.entry__header h1{margin-bottom:0;font-size:clamp(2.6rem,5vw,4.7rem)}
.entry__content>*+*{margin-top:1.35em}
.entry__content a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{padding:28px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-sm)}
.post-card h2{font-size:1.65rem}
.empty-state{max-width:760px;margin:30px auto;padding:62px;text-align:center;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm)}

@media(max-width:760px){
  .shell{width:min(calc(100% - 28px),var(--shell))}
  .content-shell{padding-block:68px}
  .post-grid{grid-template-columns:1fr}
  .empty-state{padding:42px 22px}
}