@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Caveat:wght@600;700&display=swap');

:root{
  --wood: #7a5136;
  --wood-dark: #4e321f;
  --wood-light: #96694a;
  --cork: #c9a26b;
  --cork-dark: #a9824f;
  --bg: #EFEAE0;
  --card: #FFFFFF;
  --border: #E3E2DC;
  --ink: #241C14;
  --ink-soft: #7c7263;
  --accent: #2F6F62;
  --accent-dark: #234F45;
  --danger: #B84C3D;
  --radius: 8px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:inherit;}

header.top{
  padding:2.4rem 1.5rem 1.1rem;
  text-align:center;
  background:linear-gradient(180deg, var(--wood-dark), var(--wood) 140%);
  color:#F4EEE2;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
  position:relative;
}
header.top .ig-btn{
  position:absolute;
  top:.9rem;
  right:.9rem;
  width:38px;
  height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  color:#F4EEE2;
  transition:background .15s ease, transform .15s ease;
  z-index:2;
}
header.top .ig-btn:hover{
  background:rgba(255,255,255,.22);
  transform:translateY(-1px);
}
header.top .ig-btn svg{width:20px; height:20px; display:block;}
header.top::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-8px; height:8px;
  background:linear-gradient(90deg, var(--wood-dark), var(--wood-light), var(--wood-dark));
  opacity:.6;
}
header.top .site-logo{
  display:block;
  max-width:320px;
  width:78%;
  height:auto;
  margin:0 auto .6rem;
}

header.top .eyebrow{
  display:block;
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:clamp(1.5rem,5.5vw,2.3rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#E8C876;
  text-shadow:0 2px 4px rgba(0,0,0,.35);
  margin-bottom:.35rem;
  transform:rotate(-1deg);
}
header.top h1{
  font-weight:800;
  font-size:clamp(1.5rem,4vw,2.05rem);
  letter-spacing:-.01em;
  margin:0 0 .45rem;
  text-shadow:0 2px 3px rgba(0,0,0,.35);
}
header.top p{
  color:#D8CBB4;
  font-size:.9rem;
  max-width:42ch;
  margin:0 auto;
  line-height:1.5;
}

nav.foot-nav{
  display:flex;
  justify-content:center;
  gap:1.4rem;
  flex-wrap:wrap;
  padding:1.6rem 1rem 2.6rem;
  font-size:.82rem;
}
nav.foot-nav a{
  color:var(--ink-soft);
  text-decoration:none;
}
nav.foot-nav a:hover{color:var(--ink);}

main{
  flex:1;
  width:100%;
  max-width:1220px;
  margin:0 auto;
  padding:1.6rem 1.2rem 3rem;
}

.layout-grid{
  display:flex;
  align-items:flex-start;
  gap:1.6rem;
}
.layout-grid .corkboard{
  flex:1;
  min-width:0;
}
.compose-sidebar{
  flex:0 0 300px;
  position:sticky;
  top:1.2rem;
}
.compose-sidebar form.compose{margin-bottom:0;}

@media (max-width:900px){
  .layout-grid{flex-direction:column;}
  .compose-sidebar{
    flex:none;
    width:100%;
    position:static;
    order:-1;
  }
}

/* --- corkboard frame wrapping the notes --- */
.corkboard{
  position:relative;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.10) 0, transparent 3px),
    radial-gradient(circle at 60% 70%, rgba(0,0,0,.08) 0, transparent 3px),
    radial-gradient(circle at 85% 20%, rgba(0,0,0,.09) 0, transparent 3px),
    radial-gradient(circle at 35% 85%, rgba(0,0,0,.07) 0, transparent 3px),
    radial-gradient(circle at 5% 60%, rgba(0,0,0,.08) 0, transparent 3px),
    repeating-radial-gradient(circle at 0 0, rgba(0,0,0,.05) 0 2px, transparent 2px 34px),
    linear-gradient(160deg, var(--cork), var(--cork-dark));
  border:14px solid var(--wood);
  border-radius:6px;
  box-shadow:
    inset 0 0 0 3px var(--wood-dark),
    inset 0 2px 18px rgba(0,0,0,.35),
    0 8px 24px rgba(40,25,10,.25);
  padding:1.4rem 1.1rem;
}

#feed.board{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:1.4rem 1.1rem;
  align-items:start;
}

.board-toolbar{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin-bottom:1.1rem;
}
.board-toolbar-label{
  font-size:.78rem;
  font-weight:700;
  color:var(--wood-dark);
}
.sort-toggle{display:flex; gap:.4rem;}
.sort-btn{
  background:rgba(255,255,255,.4);
  border:1px solid rgba(0,0,0,.15);
  color:var(--wood-dark);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:.78rem;
  padding:.32rem .75rem;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.sort-btn:hover{background:rgba(255,255,255,.65);}
.sort-btn.active{
  background:var(--wood-dark);
  color:#F4EEE2;
  border-color:var(--wood-dark);
}

.note{
  --rot: 0deg;
  background:#FFF7D6;
  border:none;
  border-radius:2px;
  padding:1.1rem 1.05rem .95rem;
  cursor:pointer;
  position:relative;
  transform:rotate(var(--rot));
  box-shadow:
    0 1px 1px rgba(0,0,0,.08),
    0 8px 14px rgba(20,14,4,.28),
    0 2px 3px rgba(0,0,0,.15);
  transition:transform .18s ease, box-shadow .18s ease;
}
.note::before{
  content:"";
  position:absolute; top:-11px; left:50%;
  width:17px; height:17px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fff9, var(--pin-color,#D64545) 62%);
  box-shadow:0 3px 4px rgba(0,0,0,.4), inset 0 -2px 2px rgba(0,0,0,.3);
  z-index:2;
}
.note:hover{
  transform:rotate(0deg) translateY(-5px) scale(1.035);
  box-shadow:
    0 2px 2px rgba(0,0,0,.08),
    0 16px 22px rgba(20,14,4,.3),
    0 3px 5px rgba(0,0,0,.18);
}
.note.c1{background:#FFF3B0; --pin-color:#D64545;}
.note.c2{background:#FFD9E4; --pin-color:#3D6EDB;}
.note.c3{background:#D8F2DE; --pin-color:#D68A1F;}
.note.c4{background:#D3E8FF; --pin-color:#2F8F52;}
.note.c5{background:#EADCFF; --pin-color:#C4408C;}

.note .meta{
  font-size:.74rem;
  color:var(--ink-soft);
  margin-bottom:.45rem;
  display:flex;
  justify-content:space-between;
  gap:.6rem;
}
.note .nick{font-weight:700; color:var(--ink);}
.note .content{
  font-size:.98rem;
  line-height:1.45;
  word-break:break-word;
  white-space:pre-wrap;
}
.note .reply-count{
  margin-top:.65rem;
  font-size:.76rem;
  color:var(--accent-dark);
  font-weight:600;
}

@keyframes pinDrop{
  0%{ opacity:0; transform:translateY(-70px) rotate(calc(var(--rot) - 10deg)) scale(1.18); }
  55%{ opacity:1; transform:translateY(8px) rotate(calc(var(--rot) + 3deg)) scale(.96); }
  75%{ transform:translateY(-3px) rotate(calc(var(--rot) - 1deg)) scale(1.01); }
  100%{ opacity:1; transform:translateY(0) rotate(var(--rot)) scale(1); }
}
.note.pinning{ animation:pinDrop .6s cubic-bezier(.34,1.56,.64,1) both; }
.note.pinning::before{ opacity:0; animation:pinPop .22s .42s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes pinPop{ from{opacity:0; transform:translateX(-50%) scale(0);} to{opacity:1; transform:translateX(-50%) scale(1);} }

.empty-state{
  grid-column:1/-1;
  color:#5a4326;
  text-align:center;
  padding:2.6rem 1rem;
  font-family:'Caveat',cursive;
  font-size:1.4rem;
}

/* --- compose form --- */
form.compose{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.1rem 1.2rem;
  margin:0 0 1.6rem;
  box-shadow:0 2px 8px rgba(20,14,4,.06);
}
form.compose .row{display:flex; gap:.6rem; margin-bottom:.6rem;}
form.compose input[type=text],
form.compose textarea{
  width:100%;
  font-family:inherit;
  font-size:.95rem;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg);
  padding:.55rem .65rem;
  resize:none;
  color:var(--ink);
}
form.compose textarea{min-height:60px;}
form.compose .nick-field{max-width:150px;}
.char-count{font-size:.72rem; color:var(--ink-soft); text-align:right; margin-top:2px;}
.char-count.over{color:var(--danger);}

.anon-toggle{
  display:flex; align-items:center; gap:.4rem;
  font-size:.78rem; color:var(--ink-soft);
  margin-bottom:.7rem;
}

.reply-target-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#EFF6F2; border:1px solid #CFE3D8; color:var(--accent-dark);
  font-size:.78rem; font-weight:600;
  padding:.32rem .55rem .32rem .7rem;
  border-radius:999px;
  margin-bottom:.65rem;
}
.reply-target-chip button{
  background:none; border:none; cursor:pointer; color:var(--accent-dark);
  font-size:.9rem; line-height:1; padding:0 0 0 .1rem;
}

.btn{
  display:inline-block;
  background:var(--ink);
  color:#fff;
  border:none;
  padding:.6rem 1.1rem;
  border-radius:6px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:.88rem;
  cursor:pointer;
}
.btn:hover{background:var(--accent-dark);}
.btn:disabled{background:#B9B8B0; cursor:not-allowed;}
.btn.secondary{background:transparent; color:var(--ink); border:1px solid var(--border);}
.btn.danger{background:var(--danger);}
.btn.danger:hover{background:#96392C;}
.btn.small{padding:.3rem .65rem; font-size:.76rem; font-weight:600;}
.btn.small.ghost{background:transparent; color:var(--accent-dark); border:1px solid #CFE3D8;}
.btn.small.ghost:hover{background:#EFF6F2;}

.captcha-box{margin:.7rem 0;}
.captcha-row{display:flex; align-items:center; gap:.5rem;}
.captcha-canvas{
  border:1px solid var(--border);
  border-radius:6px;
  background:#EDECE6;
  display:block;
}
.captcha-refresh{
  background:transparent;
  border:1px solid var(--border);
  border-radius:6px;
  width:38px; height:38px;
  font-size:1.05rem;
  color:var(--ink-soft);
  cursor:pointer;
  flex-shrink:0;
}
.captcha-refresh:hover{color:var(--ink); border-color:#D4D3CB;}
.captcha-input{
  margin-top:.5rem;
  width:100%;
  font-family:inherit;
  font-size:.95rem;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg);
  padding:.55rem .65rem;
  color:var(--ink);
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* --- reply / zoom modal --- */
.overlay{
  position:fixed; inset:0;
  background:rgba(20,14,4,.55);
  display:flex; align-items:center; justify-content:center;
  padding:1.2rem;
  z-index:40;
  opacity:0;
  animation:fadeIn .16s ease forwards;
}
@keyframes fadeIn{to{opacity:1;}}
.modal-card{
  background:var(--bg);
  border-radius:14px;
  max-width:760px; width:100%;
  max-height:88vh;
  overflow-y:auto;
  padding:1.3rem 1.3rem 1.5rem;
  transform:scale(.9);
  opacity:0;
  animation:zoomIn .16s ease forwards;
  position:relative;
}
@keyframes zoomIn{to{transform:scale(1); opacity:1;}}
.modal-close{
  position:absolute; top:.8rem; right:.9rem;
  background:none; border:none; font-size:1.2rem;
  color:var(--ink-soft); cursor:pointer; line-height:1;
  z-index:3;
}
.modal-close:hover{color:var(--ink);}

.thread-layout{
  display:flex;
  gap:1.2rem;
  align-items:flex-start;
}
.thread-main{
  flex:1.3;
  min-width:0;
}
.thread-main-label{
  display:inline-block;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--wood-dark);
  background:var(--cork);
  padding:.22rem .55rem;
  border-radius:999px;
  margin-bottom:.55rem;
}
.thread-main .note{
  cursor:default;
  transform:rotate(-1.2deg);
}
.thread-main .note:hover{transform:rotate(-1.2deg);}
.thread-main .content{font-size:1.02rem;}
.thread-main .thread-side-label{margin-top:1rem;}
.thread-main .reply-list{margin-bottom:0;}

.thread-side{
  flex:1;
  min-width:0;
}
@media (min-width:641px){
  .thread-side{ border-left:1px solid var(--border); padding-left:1.2rem; }
}
.thread-side-label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); font-weight:700; margin:.2rem 0 .6rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
}
.reply-list{display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem;}
.reply{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.7rem .85rem;
  position:relative;
}
.reply::before{
  content:"";
  position:absolute; left:-7px; top:14px;
  width:12px; height:12px;
  background:var(--card);
  border-left:1px solid var(--border);
  border-bottom:1px solid var(--border);
  transform:rotate(45deg);
}
.reply .reply-to{
  font-size:.72rem; color:var(--accent-dark); font-weight:600;
  margin-bottom:.3rem;
  display:flex; align-items:center; gap:.3rem;
}
.reply .reply-to .arrow{color:var(--ink-soft); font-weight:400;}
.reply .meta{font-size:.72rem; margin-bottom:.25rem; display:flex; justify-content:space-between; gap:.6rem;}
.reply .content{font-size:.92rem; line-height:1.42; white-space:pre-wrap; word-break:break-word;}
.reply .reply-actions{margin-top:.45rem;}

.reply.reply-pinning{animation:replyIn .3s ease both;}
@keyframes replyIn{from{opacity:0; transform:translateX(10px);} to{opacity:1; transform:translateX(0);}}

.no-replies-yet{
  color:var(--ink-soft); font-size:.85rem; font-style:italic;
  padding:.6rem 0 1rem;
}

.note-actions{margin-top:.7rem; display:flex; gap:.5rem; flex-wrap:wrap;}
.note-actions .btn{padding:.35rem .7rem; font-size:.78rem;}
.note{cursor:default;}
#feed.board .note{cursor:pointer;}

@media (max-width:640px){
  .thread-layout{flex-direction:column;}
  .thread-main{flex:1;}
  .thread-main .note{transform:none;}
}

.page{
  background:var(--card);
  border:1px solid var(--border);
  max-width:640px;
  margin:2rem auto;
  padding:2rem 2rem 2.4rem;
  border-radius:var(--radius);
}
.page h2{font-size:1.4rem; margin-top:0;}
.page h3{font-size:1rem; margin-bottom:.3rem;}
.page ol, .page ul{padding-left:1.2rem; line-height:1.6;}
.page p{line-height:1.6; color:var(--ink);}

.changelog-entry{margin-bottom:1.3rem;}
.changelog-entry .ver{font-weight:700; font-size:1.02rem;}
.changelog-entry .date{color:var(--ink-soft); font-size:.8rem; margin-left:.4rem;}

.admin-bar{
  display:flex; justify-content:space-between; align-items:center;
  max-width:920px; margin:0 auto; padding:1rem 1.2rem 0;
  font-size:.85rem;
}
.login-box{max-width:340px; margin:3rem auto;}
.login-box input{width:100%; margin-bottom:.7rem; padding:.6rem .7rem; border-radius:6px; border:1px solid var(--border);}
.error-msg{color:var(--danger); font-size:.85rem; margin-top:.5rem;}

.toast{
  position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:6px;
  font-size:.85rem; z-index:50; opacity:0; pointer-events:none;
  transition:opacity .25s;
}
.toast.show{opacity:1;}

@media (max-width:480px){
  #feed.board{grid-template-columns:1fr;}
  .corkboard{padding:1.1rem .8rem;}
}