:root{
  --red:#E63329;
  --blue:#2A5CAA;
  --yellow:#F7D842;
  --ink:#111111;
  --paper:#FAF7F0;
  --white:#ffffff;
  --line:3px solid var(--ink);
  --font-display:'Archivo Black',sans-serif;
  --font-serif:'DM Serif Display',serif;
  --font-body:'Space Grotesk',sans-serif;
  --shadow:8px 8px 0 var(--ink);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
.hidden{display:none !important}

/* ===== Mondrian strips ===== */
.mondrian-strip{display:flex;height:14px;border-bottom:var(--line)}
.mondrian-strip.flip{border-bottom:0;border-top:var(--line)}
.mondrian-strip span{flex:2;border-right:var(--line)}
.mondrian-strip span:last-child{border-right:0}
.mondrian-strip span.sm{flex:1}
.m-red{background:var(--red)}.m-blue{background:var(--blue)}
.m-yellow{background:var(--yellow)}.m-white{background:var(--white)}

/* ===== Header ===== */
.site-header{background:var(--white);border-bottom:var(--line);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.logo-mark{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.06)}
.logo-text{font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.5px}
.logo-accent{color:var(--red)}
.nav{display:flex;align-items:center;gap:8px}
.nav-link{
  font-family:var(--font-body);font-weight:700;font-size:.95rem;
  color:var(--ink);text-decoration:none;background:none;border:3px solid transparent;
  padding:8px 16px;cursor:pointer;transition:all .18s ease;
}
.nav-link:hover{border-color:var(--ink);background:var(--yellow)}
.admin-link:hover{background:var(--blue);color:var(--white)}

/* ===== Hero ===== */
.hero{background:var(--white);border-bottom:var(--line);overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding:72px 24px}
.kicker{
  display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:.75rem;background:var(--yellow);border:var(--line);padding:6px 14px;margin-bottom:20px;
  box-shadow:4px 4px 0 var(--ink);
}
.hero-title{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1;margin-bottom:18px}
.c-red{color:var(--red)}.c-blue{color:var(--blue)}
.c-yellow{color:var(--yellow);text-shadow:2px 2px 0 var(--ink)}
.hero-sub{font-size:1.15rem;max-width:44ch;margin-bottom:28px;color:#333}

/* Hero art grid */
.grid-art{
  display:grid;width:min(320px,100%);aspect-ratio:1;margin-left:auto;
  grid-template-columns:2fr 1fr 1.4fr;grid-template-rows:1.6fr 1fr 1.2fr;
  border:5px solid var(--ink);box-shadow:var(--shadow);background:var(--ink);gap:5px;
}
.cell{transition:transform .25s ease}
.cell:hover{transform:scale(.94)}
.cell.red{background:var(--red);grid-column:1;grid-row:1}
.cell.white.a{background:var(--white);grid-column:2/4;grid-row:1}
.cell.yellow{background:var(--yellow);grid-column:1;grid-row:2}
.cell.blue{background:var(--blue);grid-column:2;grid-row:2/4}
.cell.white.b{background:var(--white);grid-column:3;grid-row:2}
.cell.white.c{background:var(--white);grid-column:1;grid-row:3}
.cell.red.sm{background:var(--red);grid-column:3;grid-row:3}
.cell.white.d{display:none}

/* ===== Buttons ===== */
.btn{
  display:inline-block;font-family:var(--font-body);font-weight:700;font-size:1rem;
  padding:12px 26px;border:var(--line);cursor:pointer;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn-primary{background:var(--red);color:var(--white);box-shadow:5px 5px 0 var(--ink)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);background:#c9271e}
.btn-primary:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn-primary:disabled{opacity:.55;cursor:wait;transform:none}
.btn-ghost{background:var(--white);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn-ghost:hover{background:var(--yellow);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}

/* ===== Posts section ===== */
main{padding:64px 24px 80px}
.section-head{display:flex;align-items:center;gap:24px;margin-bottom:40px}
.section-title{font-family:var(--font-display);font-size:2rem}
.section-rule{flex:1;height:14px;background:repeating-linear-gradient(90deg,var(--red) 0 60px,var(--ink) 60px 63px,var(--yellow) 63px 123px,var(--ink) 123px 126px,var(--blue) 126px 186px,var(--ink) 186px 189px);border:var(--line)}

.status{display:flex;align-items:center;gap:12px;font-weight:500;padding:18px 0}
.status.error-status{color:var(--red);font-weight:700}
.spinner{
  width:22px;height:22px;border:3px solid var(--ink);border-top-color:var(--red);
  border-radius:50%;animation:spin .8s linear infinite;flex:none;
}
@keyframes spin{to{transform:rotate(360deg)}}

.posts{display:flex;flex-direction:column;gap:40px}
.post{
  background:var(--white);border:var(--line);box-shadow:var(--shadow);
  padding:36px 40px;position:relative;
  animation:rise .45s ease both;
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.post::before{
  content:"";position:absolute;top:-3px;left:-3px;width:56px;height:14px;
  border:var(--line);
}
.post:nth-child(3n+1)::before{background:var(--red)}
.post:nth-child(3n+2)::before{background:var(--blue)}
.post:nth-child(3n)::before{background:var(--yellow)}
.post-title{font-family:var(--font-serif);font-size:1.9rem;line-height:1.2;margin-bottom:8px}
.post-date{
  display:inline-block;font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--blue);margin-bottom:18px;
}
.post-body p{margin-bottom:1em;font-size:1.05rem}
.post-body p:last-child{margin-bottom:0}
.delete-btn{
  position:absolute;top:14px;right:14px;background:var(--white);border:2px solid var(--ink);
  font-family:var(--font-body);font-weight:700;font-size:.75rem;padding:5px 10px;
  cursor:pointer;transition:all .15s ease;
}
.delete-btn:hover{background:var(--red);color:var(--white)}
.delete-btn:disabled{opacity:.5;cursor:wait}

.empty{
  text-align:center;padding:60px 24px;border:3px dashed var(--ink);background:var(--white);
}
.empty h3{font-family:var(--font-serif);font-size:1.6rem;margin-bottom:8px}
.empty p{color:#555}

/* ===== Admin panel ===== */
.admin{background:var(--blue);border-top:var(--line);border-bottom:var(--line);padding:64px 0}
.admin-card{
  background:var(--white);border:var(--line);box-shadow:var(--shadow);
  max-width:640px;margin:0 auto;padding:36px 40px;position:relative;
  animation:rise .35s ease both;
}
.admin-tab{position:absolute;top:-17px;left:32px;display:flex;height:14px;width:120px;border:var(--line)}
.admin-tab span{flex:1;border-right:var(--line)}
.admin-tab span:last-child{border-right:0}
.t-red{background:var(--red)}.t-yellow{background:var(--yellow)}.t-blue{background:var(--blue)}
.admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.admin-title{font-family:var(--font-display);font-size:1.6rem}
.close-btn{
  background:var(--white);border:var(--line);width:40px;height:40px;font-size:1rem;
  font-weight:700;cursor:pointer;transition:all .15s ease;
}
.close-btn:hover{background:var(--red);color:var(--white);transform:rotate(90deg)}
.admin-welcome{margin-bottom:20px;font-size:1.05rem;font-weight:500}

.admin-form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field-label{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em}
input[type=text],input[type=password],textarea{
  font-family:var(--font-body);font-size:1rem;padding:12px 14px;
  border:var(--line);background:var(--paper);color:var(--ink);
  transition:box-shadow .15s ease,background .15s ease;resize:vertical;
}
input:focus,textarea:focus{outline:none;background:var(--white);box-shadow:5px 5px 0 var(--yellow)}
.admin-actions{display:flex;gap:16px;flex-wrap:wrap}

.error{background:var(--red);color:var(--white);font-weight:700;padding:10px 16px;border:var(--line)}
.success{background:var(--yellow);color:var(--ink);font-weight:700;padding:10px 16px;border:var(--line)}

/* ===== Footer ===== */
.site-footer{background:var(--ink);color:var(--paper)}
.footer-inner{padding:26px 24px;text-align:center;font-size:.95rem}
.footer-inner strong{color:var(--yellow)}

/* ===== Responsive ===== */
@media (max-width:760px){
  .hero-inner{grid-template-columns:1fr;gap:36px;padding:48px 24px}
  .grid-art{margin:0 auto}
  .post{padding:28px 22px}
  .admin-card{padding:28px 22px}
  .header-inner{padding:12px 16px}
  .logo-text{font-size:1.2rem}
}