:root{
  --sky:#dff2ef;
  --sky-deep:#c3e7e2;
  --cream:#fff8ee;
  --ink:#3a3530;
  --ink-soft:#6f6558;
  --moss:#5c9c8b;
  --amber:#f2b25c;
  --coral:#ef8c78;
  --lilac:#c6b6e2;
  --line:#e7ddc9;
  --card:#fffdf7;
  --shadow: 0 5px 0 var(--line);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(circle at 12% 8%, rgba(198,182,226,.35), transparent 40%),
    radial-gradient(circle at 90% 0%, rgba(242,178,92,.25), transparent 38%),
    linear-gradient(180deg, var(--sky), var(--sky-deep) 40%, var(--cream) 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Quicksand", sans-serif;
  line-height:1.5;
}

a{color:inherit;}

::selection{background:var(--amber); color:#fff;}

/* ---------- top banner ---------- */
.banner{
  position:relative;
  height:150px;
  overflow:hidden;
  border-bottom:2px solid var(--line);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.25) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, var(--sky-deep), var(--sky));
}
.banner svg{position:absolute; inset:0; width:100%; height:100%; opacity:.5;}
.banner svg polyline{display:none;}
.banner-title{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 6vw;
}
.banner-title .eyebrow{
  font-family:"Baloo 2", cursive;
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--coral);
  margin:0 0 6px;
}
.banner-title h1{
  font-family:"Baloo 2", cursive;
  font-weight:800;
  font-size:clamp(1.7rem, 4vw, 2.6rem);
  margin:0;
  color:var(--moss);
  letter-spacing:.02em;
}
.banner-title .sub{
  font-family:"Quicksand", sans-serif;
  font-size:.85rem;
  color:var(--ink-soft);
  margin-top:8px;
}

/* ---------- layout ---------- */
.wrap{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:36px;
  padding:34px 20px 60px;
}

/* ---------- sidebar ---------- */
aside.card{
  align-self:start;
  position:sticky;
  top:20px;
  background:var(--card);
  border:2px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.id-block{
  padding:22px 20px 18px;
  border-bottom:2px dashed var(--line);
  text-align:center;
}
.crest{
  width:78px;height:78px;
  margin:0 auto 12px;
  border-radius:50%;
  background:var(--sky);
  border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.crest img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:45% 25%;
}
.id-block h2{
  font-family:"Baloo 2", cursive;
  font-weight:700;
  font-size:1.15rem;
  color:var(--coral);
  margin:0 0 4px;
}
.id-block .role{
  font-family:"Quicksand", sans-serif;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--moss);
  margin-bottom:10px;
}
.id-block p{
  font-size:.84rem;
  color:var(--ink-soft);
  margin:0;
}

nav.links{padding:10px 0;}
nav.links a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 20px;
  font-family:"Baloo 2", cursive;
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--ink-soft);
  border-left:3px solid transparent;
  transition:.15s;
}
nav.links a:hover{
  color:var(--moss);
  background:var(--sky);
  border-left-color:var(--amber);
}
nav.links a.active{
  color:var(--moss);
  background:var(--sky);
  border-left-color:var(--moss);
  font-weight:700;
}
nav.links a .dash{color:var(--lilac);}

.stat-block{
  border-top:2px dashed var(--line);
  padding:16px 20px 20px;
  font-family:"Quicksand", sans-serif;
  font-size:.75rem;
  color:var(--ink-soft);
}
.stat-block .row{
  display:flex;justify-content:space-between;margin-bottom:7px;
}
.stat-block .row span:last-child{color:var(--ink); font-weight:600;}

/* ---------- main feed ---------- */
main{min-width:0;}

.archive-bar{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:"Baloo 2", cursive;
  font-weight:600;
  font-size:.8rem;
  color:var(--ink-soft);
  padding:0 4px 22px;
  border-bottom:2px solid var(--line);
  margin-bottom:28px;
  flex-wrap:wrap;
}
.archive-bar a{
  text-decoration:none;
  padding:5px 12px;
  border-radius:999px;
  border:2px solid transparent;
}
.archive-bar a:hover{border-color:var(--line); color:var(--ink);}
.archive-bar a.current{
  color:#fff;
  background:var(--amber);
  box-shadow:0 3px 0 #c98b32;
}
.archive-bar .arrow{color:var(--ink-soft); font-family:"Quicksand", sans-serif;}

.post{
  background:var(--card);
  border:2px solid var(--line);
  border-radius:20px;
  margin-bottom:26px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.post-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:20px 22px 4px;
}
.post-head h3{
  font-family:"Baloo 2", cursive;
  font-weight:700;
  font-size:1.15rem;
  color:var(--coral);
  margin:0;
  line-height:1.35;
}
.stamp{
  flex:none;
  font-family:"Quicksand", sans-serif;
  font-weight:700;
  font-size:.72rem;
  color:#fff;
  background:var(--moss);
  border:none;
  border-radius:999px;
  padding:4px 12px;
  transform:none;
  white-space:nowrap;
}
.post-figure{
  margin:14px 22px 0;
  border:2px solid var(--line);
  border-radius:14px;
  background:
    repeating-linear-gradient(45deg, #eef6f2 0 10px, #e4efe9 10px 20px);
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-soft);
  font-family:"Quicksand", sans-serif;
  font-size:.8rem;
  letter-spacing:.02em;
  text-align:center;
  padding:10px;
}
.post-body{
  padding:14px 22px 4px;
  font-size:.92rem;
  color:var(--ink-soft);
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:14px 22px 22px;
}
.tags a{
  text-decoration:none;
  font-family:"Quicksand", sans-serif;
  font-weight:600;
  font-size:.75rem;
  color:var(--ink);
  background:var(--sky);
  border:1px solid var(--sky-deep);
  border-radius:999px;
  padding:4px 12px;
  transition:.15s;
}
.tags a:hover{background:var(--moss); border-color:var(--moss); color:#fff;}

footer{
  text-align:center;
  font-family:"Quicksand", sans-serif;
  font-size:.78rem;
  color:var(--ink-soft);
  padding:30px 20px 40px;
}
footer a{color:var(--coral); text-decoration:none;}

.top-link{
  position:fixed;
  right:18px;
  bottom:18px;
  width:38px;height:38px;
  border-radius:50%;
  background:var(--card);
  border:2px solid var(--line);
  color:var(--moss);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  font-weight:700;
  box-shadow:var(--shadow);
}

@media (max-width: 760px){
  .wrap{grid-template-columns:1fr;}
  aside.card{position:static;}
}