@font-face{
  font-family:"Kobzar KS";
  src:url("../fonts/Kobzar_KS.woff") format("woff"),
      url("../fonts/Kobzar_KS.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --wall:#2a1013;
  --wall-hi:#3d171b;
  --umber:#221912;
  --deep:#170b0d;
  --gold:#d4ad62;
  --gold-hi:#efd28f;
  --gold-lo:#a67b38;
  --crimson:#8e1f27;
  --crimson-hi:#a8262f;
  --stitch:#c4262d;
  --ivory:#f0e4c8;
  --ivory-dim:#cfbf9f;
  --ink:#2a1013;

  --display:"Kobzar KS",Georgia,"Times New Roman",serif;
  --text:"Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
  --gutter:clamp(1.25rem,5vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--wall);color:var(--ivory);
  font:1rem/1.6 var(--text);
}
h1,h2,h3,p,ul,ol,dl,dd,figure,form{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{width:min(100% - 2 * var(--gutter),64rem);margin-inline:auto}

.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:.6rem 1rem;z-index:10}
.skip:focus{left:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.65rem 1.1rem;border:0;border-radius:3px;cursor:pointer;
  font:600 .95rem/1.2 var(--text);text-decoration:none;
  transition:background-color .15s,box-shadow .15s;
}
.btn--gold{background:var(--gold);color:var(--ink);box-shadow:0 0 0 2px var(--wall),0 0 0 3px var(--gold-lo)}
.btn--gold:hover{background:var(--gold-hi)}
.btn--ghost{background:transparent;color:var(--ivory);box-shadow:inset 0 0 0 1.5px rgba(240,228,200,.4)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ivory)}
.btn--sm{padding:.5rem .9rem;font-size:.88rem}
.btn--danger{background:transparent;color:#e8a3a3;box-shadow:inset 0 0 0 1.5px rgba(232,163,163,.5)}
.btn--danger:hover{background:rgba(196,60,60,.15)}
:focus-visible{outline:3px solid var(--ivory);outline-offset:3px}

/* ---------- topbar ---------- */
.topbar{background:var(--deep);border-bottom:1px solid rgba(212,173,98,.28)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.75rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand__icon{width:2.1rem;height:2.1rem;border-radius:50%;box-shadow:0 0 0 2px var(--gold-lo)}
.brand span{font-family:var(--display);font-size:1.4rem;color:var(--gold);line-height:1}
.topbar__right{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.topbar__user{font-size:.92rem;color:var(--ivory-dim)}

.rushnyk{
  height:20px;border-block:2px solid var(--crimson);
  background:url("../img/rushnyk.svg") repeat-x center / 20px 20px,var(--ivory);
}

/* ---------- layout chrome ---------- */
main{padding-block:2rem 3rem}
.crumbs{font-size:.88rem;color:var(--ivory-dim);margin-bottom:1.25rem}
.crumbs a{color:var(--gold-hi);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs__sep{margin:0 .4rem;opacity:.6}
.crumbs__current{color:var(--ivory-dim)}

.flash{
  margin-bottom:1.25rem;padding:.75rem 1rem;border-radius:3px;
  background:rgba(212,173,98,.15);color:var(--gold-hi);
  box-shadow:inset 0 0 0 1.5px rgba(212,173,98,.4);font-size:.92rem;
}
.error{
  margin-bottom:1.25rem;padding:.75rem 1rem;border-radius:3px;
  background:rgba(196,60,60,.15);color:#e8a3a3;
  box-shadow:inset 0 0 0 1.5px rgba(232,163,163,.4);font-size:.92rem;
}

h1.page-title{font-family:var(--display);font-size:clamp(1.9rem,4.5vw,2.6rem);color:var(--ivory);font-weight:400;margin-bottom:.4rem}
.page-lead{color:var(--ivory-dim);margin-bottom:1.75rem}

/* ---------- category list (index) ---------- */
.cat-list{display:grid;gap:1rem}
.cat-card{
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
  border:1.5px solid var(--gold-lo);background:var(--wall-hi);padding:1.25rem 1.5rem;
  text-decoration:none;color:inherit;
}
.cat-card:hover{border-color:var(--gold)}
.cat-card__name{font-family:var(--display);font-size:1.4rem;color:var(--gold);font-weight:400}
.cat-card__desc{margin-top:.3rem;font-size:.92rem;color:var(--ivory-dim)}
.cat-card__meta{flex:none;text-align:right;font-size:.85rem;color:var(--ivory-dim);white-space:nowrap}
.badge{
  display:inline-block;padding:.15rem .5rem;margin-left:.5rem;border-radius:2px;
  background:var(--crimson);color:var(--gold-hi);font-size:.72rem;font-weight:700;text-transform:uppercase;
  vertical-align:middle;
}

/* ---------- topic list (board) ---------- */
.topic-list{border:1.5px solid var(--gold-lo);background:var(--wall-hi)}
.topic-row{
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:1rem 1.25rem;text-decoration:none;color:inherit;
  border-bottom:1px solid rgba(212,173,98,.2);
}
.topic-row:last-child{border-bottom:0}
.topic-row:hover{background:rgba(212,173,98,.06)}
.topic-row__title{font-size:1.05rem;color:var(--ivory)}
.topic-row__meta{margin-top:.25rem;font-size:.82rem;color:var(--ivory-dim)}
.topic-row__stats{flex:none;text-align:right;font-size:.82rem;color:var(--ivory-dim);white-space:nowrap}
.pin{color:var(--gold)}
.lock{color:var(--ivory-dim)}

.board-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}

/* ---------- posts (topic view) ---------- */
.post{border:1.5px solid var(--gold-lo);background:var(--wall-hi);margin-bottom:1.1rem}
.post__head{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.25rem;border-bottom:1px dashed rgba(212,173,98,.3);font-size:.88rem;
}
.post__author{color:var(--gold);font-weight:600}
.post__admin-tag{color:var(--crimson-hi);font-weight:700;font-size:.75rem;margin-left:.4rem;text-transform:uppercase}
.post__time{color:var(--ivory-dim)}
.post__body{padding:1.25rem;line-height:1.7;overflow-wrap:anywhere}
.post__foot{padding:.6rem 1.25rem 1rem;display:flex;gap:.75rem}

/* ---------- forms ---------- */
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.88rem;color:var(--ivory-dim);margin-bottom:.4rem}
.field input,.field textarea{
  width:100%;padding:.65rem .8rem;background:var(--deep);
  box-shadow:inset 0 0 0 1.5px rgba(212,173,98,.35);border:0;border-radius:3px;
  color:var(--ivory);font:1rem/1.4 var(--text);
}
.field input:focus,.field textarea:focus{box-shadow:inset 0 0 0 1.5px var(--gold);outline:none}
.field textarea{resize:vertical;min-height:8rem}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-card{border:1.5px solid var(--gold-lo);background:var(--wall-hi);padding:1.5rem;max-width:36rem}
.form-card--wide{max-width:none}
.field-hint{font-size:.8rem;color:var(--ivory-dim);margin-top:.35rem}

/* ---------- pagination ---------- */
.pager{display:flex;gap:.5rem;margin-top:1.5rem;flex-wrap:wrap}
.pager a,.pager span{
  padding:.4rem .75rem;border:1.5px solid var(--gold-lo);color:var(--ivory-dim);
  text-decoration:none;font-size:.88rem;border-radius:2px;
}
.pager a:hover{border-color:var(--gold);color:var(--gold)}
.pager .is-current{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}

/* ---------- footer ---------- */
.foot{padding-block:1.75rem;font-size:.88rem;color:var(--ivory-dim)}
.foot p+p{margin-top:.35rem}
.foot a{color:var(--gold-hi);text-decoration:none}
.foot a:hover{text-decoration:underline}

@media (max-width:36rem){
  .cat-card,.topic-row{flex-direction:column;align-items:flex-start}
  .cat-card__meta,.topic-row__stats{text-align:left}
  .post__head{flex-direction:column;align-items:flex-start;gap:.3rem}
}