:root{
  --paper:#FAF3E6;
  --ink:#3B3128;
  --ink-soft:#6b5f52;
  --rose:#E7A4A0;
  --sage:#93AD8C;
  --mustard:#E7B94E;
  --sky:#A9C6D9;
  --rule-blue:#C9D6E3;
  --rule-red:#E0A8A8;
  --card:#FFFDF8;
  --radius:8px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Literata', serif;
  font-size:16px;
  line-height:1.65;
  /* notebook paper: faint ruled lines + a margin line, the signature visual device */
  background-image:
    linear-gradient(var(--rule-red) 1px, transparent 1px),
    repeating-linear-gradient(var(--paper) 0 27px, var(--rule-blue) 27px 28px);
  background-position: 64px 0, 0 8px;
  background-size: 100% 100%, 100% 28px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

h1,h2,h3,.site-title{font-family:'Caveat', cursive; font-weight:700;}
a{color:inherit;}
.page{max-width:1000px; margin:0 auto; padding:0 24px 40px;}

/* ---------- washi tape ---------- */
.tape{
  position:absolute;
  height:26px;
  opacity:0.85;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 5px, transparent 5px 10px);
  box-shadow:0 1px 2px rgba(59,49,40,0.15);
}
.tape-pink{background-color:var(--rose);}
.tape-sage{background-color:var(--sage);}
.tape-mustard{background-color:var(--mustard);}
.tape.corner{
  width:70px; height:22px;
  top:-10px; left:50%;
  transform:translateX(-50%) rotate(-4deg);
}

/* ---------- header ---------- */
.site-header{
  position:relative;
  text-align:center;
  padding:56px 20px 28px;
}
.site-header .tape{
  width:180px;
  top:8px; left:50%;
  transform:translateX(-50%) rotate(-2deg);
}
.site-title{
  font-size:3.4rem;
  margin:14px 0 6px;
  color:var(--ink);
}
.site-tagline{
  margin:0;
  color:var(--ink-soft);
  font-size:1rem;
  font-style:italic;
}

/* ---------- layout ---------- */
.layout{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:32px;
  align-items:start;
}
.feed-col{min-width:0;}

/* ---------- filter bar ---------- */
.filter-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.filter-btn{
  background:var(--card);
  border:1.5px solid var(--ink);
  border-radius:20px;
  padding:7px 18px;
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:1.05rem;
  color:var(--ink);
  cursor:pointer;
}
.filter-btn:hover{background:#f4ead9;}
.filter-btn.is-active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.filter-btn:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--sky);
  outline-offset:2px;
}

/* ---------- posts ---------- */
.feed{display:flex; flex-direction:column; gap:34px;}
.post{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:22px;
  background:var(--card);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:0 3px 10px rgba(59,49,40,0.08);
}
.post:nth-child(odd){transform:rotate(-0.4deg);}
.post:nth-child(even){transform:rotate(0.4deg);}

.polaroid{
  position:relative;
  background:#fff;
  padding:8px 8px 20px;
  box-shadow:0 3px 8px rgba(59,49,40,0.18);
  border-radius:2px;
  align-self:start;
}
.post-media{aspect-ratio:1/1;}
.post-media::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  border-radius:1px;
  background:linear-gradient(135deg, var(--g1), var(--g2));
}

.post-body{min-width:0;}
.post-cat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:1.1rem;
  margin-bottom:6px;
}
.cat-movies{color:#C96B65;}
.cat-tv{color:#5A87A3;}
.cat-cooking{color:#B98F2C;}
.cat-rants{color:#5F7A57;}

.post h2{
  font-size:1.7rem;
  margin:0 0 4px;
  line-height:1.2;
}
.post-meta{
  margin:0 0 10px;
  font-size:0.85rem;
  color:var(--ink-soft);
  font-style:italic;
}
.post p{margin:0 0 10px; font-size:0.98rem; max-width:60ch;}
.post p:last-child{margin-bottom:0;}

.empty-state{
  text-align:center;
  color:var(--ink-soft);
  font-style:italic;
  padding:30px 0;
}

/* ---------- guestbook ---------- */
.guestbook{
  position:relative;
  background:var(--card);
  border-radius:var(--radius);
  padding:32px 28px;
  margin-top:44px;
  box-shadow:0 3px 10px rgba(59,49,40,0.08);
}
.guestbook .tape{
  width:150px;
  top:-12px; left:36px;
  transform:rotate(-3deg);
}
.guestbook h2{font-size:2rem; margin:6px 0 4px;}
.guestbook-sub{margin:0 0 20px; color:var(--ink-soft); font-size:0.88rem; max-width:60ch;}

.guestbook-list{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:14px;}
.guestbook-entry{
  border-left:3px solid var(--sage);
  padding:4px 0 4px 14px;
}
.gb-name{margin:0; font-family:'Caveat', cursive; font-weight:700; font-size:1.15rem; color:var(--ink);}
.gb-msg{margin:2px 0 0; font-size:0.92rem;}

.guestbook-form{display:flex; flex-wrap:wrap; gap:14px; align-items:end;}
.gb-field{display:flex; flex-direction:column; gap:4px;}
.gb-field label{font-size:0.78rem; color:var(--ink-soft); font-style:italic;}
.gb-field input{
  padding:9px 12px;
  border:1.5px solid var(--ink);
  border-radius:6px;
  font-family:'Literata', serif;
  font-size:0.92rem;
  background:#fff;
}
#gbName{width:160px;}
#gbMsg{width:280px;}
.guestbook-form button{
  background:var(--sage);
  color:#fff;
  border:none;
  border-radius:20px;
  padding:10px 22px;
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:1.1rem;
  cursor:pointer;
}
.guestbook-form button:hover{opacity:0.9;}

/* ---------- sidebar ---------- */
.sidebar{
  display:flex;
  flex-direction:column;
  gap:22px;
  position:sticky;
  top:24px;
}
.widget{
  background:var(--card);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:0 3px 10px rgba(59,49,40,0.08);
}
.widget h3{margin:0 0 12px; font-size:1.3rem;}

.about-widget{text-align:center;}
.profile-pic{width:110px; margin:0 auto 14px;}
.profile-pic .post-media{aspect-ratio:1/1;}
.about-widget p{font-size:0.9rem; margin:0 0 8px; color:var(--ink-soft);}
.stamp{
  display:inline-block;
  border:1.5px dashed var(--rose);
  color:#C96B65;
  border-radius:20px;
  padding:3px 12px;
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:0.9rem;
  transform:rotate(-3deg);
}

.currently-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:0.9rem;}
.cl-label{
  display:inline-block;
  font-family:'Caveat', cursive;
  font-weight:700;
  color:var(--sage);
  margin-right:6px;
}

.counter-widget{text-align:center;}
.odometer{
  display:inline-flex;
  gap:3px;
  background:var(--ink);
  padding:8px 12px;
  border-radius:4px;
  margin-bottom:8px;
}
.odometer span{
  font-family:'Courier New', monospace;
  font-weight:700;
  font-size:1.3rem;
  color:var(--mustard);
  background:#2a231c;
  padding:2px 5px;
  border-radius:2px;
}
.counter-note{font-size:0.75rem; color:var(--ink-soft); font-style:italic; margin:0;}

.tag-cloud{display:flex; flex-wrap:wrap; gap:8px;}
.tag{
  font-family:'Caveat', cursive;
  font-weight:700;
  border-radius:14px;
  padding:3px 12px;
}
.tag.t1{background:#F3DEDC; color:#C96B65; font-size:0.95rem;}
.tag.t2{background:#DCE6EE; color:#5A87A3; font-size:0.85rem;}
.tag.t3{background:#E6EEE1; color:#5F7A57; font-size:1.05rem;}

/* ---------- footer ---------- */
.site-footer{
  text-align:center;
  color:var(--ink-soft);
  font-size:0.82rem;
  font-style:italic;
  padding:36px 0 10px;
}

/* ---------- responsive ---------- */
@media (max-width: 820px){
  .layout{grid-template-columns:1fr;}
  .post{grid-template-columns:110px 1fr;}
  .sidebar{position:static;}
  .site-title{font-size:2.4rem;}
}
@media (max-width: 520px){
  .post{grid-template-columns:1fr; }
  .polaroid{width:140px;}
}