/* Kasilam: a painted wall, a notice board and a school exercise book.
   Flat colours, real paper, no gradients or glow. */
:root {
  --paper: #f6efe2;
  --white: #fffdf8;
  --ink: #221a12;
  --soft: #6f6353;
  --orange: #e05e14;
  --green: #1f6b3f;
  --green-dark: #16502f;
  --sun: #d99a2b;
  --board: #c8a272;
  --board-dark: #8a6a43;
  --tape: rgba(233, 222, 178, .85);
  --redink: #b5291f;
  --blueline: #a9c3df;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: Archivo, Arial, sans-serif; font-size: 17px; line-height: 1.55; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 400; }

/* ── the painted wall ─────────────────────────────── */
.wall { background: var(--paper); position: relative; padding-bottom: 0; overflow: hidden; }
.wall::after { content: ''; display: block; height: 120px; background: var(--green); border-top: 8px solid var(--green-dark); }
.top { display: flex; gap: 26px; justify-content: flex-end; padding: 18px 5vw 0; font-family: 'Courier Prime', monospace; font-size: 15px; }
.top a { text-decoration: none; border-bottom: 2px solid transparent; }
.top a:hover { border-color: var(--orange); }
.wall-in { display: flex; align-items: flex-end; gap: 28px; padding: 46px 5vw 0; position: relative; z-index: 1; margin-bottom: -86px; flex-wrap: wrap; }
.sign { background: var(--orange); color: var(--white); padding: 18px 34px 20px; transform: rotate(-1deg); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); display: inline-flex; flex-direction: column; }
.sign-main { font-family: 'Bowlby One', Impact, sans-serif; font-size: clamp(56px, 11vw, 132px); line-height: .95; letter-spacing: .02em; text-shadow: 4px 4px 0 var(--ink); }
.sign-sub { font-family: Kalam, cursive; font-weight: 700; font-size: clamp(22px, 3vw, 34px); color: var(--ink); background: var(--sun); align-self: flex-start; padding: 0 12px; transform: rotate(1deg); margin-top: 6px; }
.board-small { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; transform: rotate(2deg); }
.board-small span { font-family: 'Bowlby One', Impact, sans-serif; font-size: 20px; padding: 4px 14px; border: 3px solid var(--ink); background: var(--white); text-align: center; }
.board-small span:last-child { background: var(--green); color: var(--white); }
.where { position: absolute; left: 5vw; bottom: 22px; color: var(--white); font-family: 'Courier Prime', monospace; font-size: 15px; z-index: 2; }

/* ── intro ───────────────────────────────────────── */
.intro { padding: 70px 5vw 60px; max-width: 1100px; }
.intro h1 { font-family: Archivo, Arial, sans-serif; font-weight: 800; font-size: clamp(32px, 5vw, 60px); line-height: 1.08; letter-spacing: -.01em; }
.under { background: linear-gradient(transparent 62%, var(--sun) 62%, var(--sun) 90%, transparent 90%); }
.intro p { margin-top: 22px; max-width: 760px; color: var(--soft); font-size: 19px; }
.intro-actions { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; align-items: center; }

/* painted button and a plain one */
.btn-paint { display: inline-block; background: var(--green); color: var(--white); text-decoration: none; font-weight: 700; padding: 14px 22px; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); transition: transform .1s, box-shadow .1s; }
.btn-paint:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.btn-plain { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.btn-plain:hover { color: var(--orange); }

/* ── notice board ────────────────────────────────── */
.board { background: var(--board); border-top: 14px solid var(--board-dark); border-bottom: 14px solid var(--board-dark); padding: 56px 5vw 70px;
  background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px); background-size: 7px 7px; }
.board-title { font-family: 'Bowlby One', Impact, sans-serif; font-size: clamp(38px, 6vw, 72px); line-height: 1; color: var(--ink); }
.board-sub { font-family: Kalam, cursive; font-size: 22px; margin-top: 6px; }
.shelf { margin-top: 54px; }
.shelf-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.shop-sign { font-family: 'Bowlby One', Impact, sans-serif; font-size: clamp(20px, 2.4vw, 28px); background: var(--ink); color: var(--white); padding: 6px 16px; transform: rotate(-1deg); }
.shelf-head p { font-family: Kalam, cursive; font-size: 19px; }
.posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 34px 28px; }
.poster { position: relative; display: flex; flex-direction: column; background: var(--white); text-decoration: none; padding: 12px 12px 14px;
  transform: rotate(var(--tilt)); box-shadow: 0 2px 0 rgba(0,0,0,.15), 0 10px 14px -10px rgba(0,0,0,.45); transition: transform .15s; }
.poster:hover { transform: rotate(0deg) translateY(-3px); }
.poster:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.tape { position: absolute; top: -12px; left: 50%; width: 96px; height: 24px; background: var(--tape); transform: translateX(-50%) rotate(-3deg); }
.poster img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; border: 1px solid #e3dccd; }
.poster-name { font-family: Kalam, cursive; font-weight: 700; font-size: 23px; line-height: 1.15; margin-top: 12px; }
.poster-text { font-size: 15px; color: var(--soft); margin-top: 6px; flex: 1; }
.poster-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 10px; }
.poster-host { font-family: 'Courier Prime', monospace; font-size: 12.5px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stamp { font-family: 'Courier Prime', monospace; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--redink);
  border: 2px solid var(--redink); padding: 2px 8px; transform: rotate(-4deg); flex: none; }

/* ── exercise book ───────────────────────────────── */
.book-wrap { padding: 80px 5vw; }
.book { max-width: 860px; margin: 0 auto; background: var(--white); padding: 44px 36px 44px 86px; position: relative;
  background-image: repeating-linear-gradient(var(--white) 0 35px, var(--blueline) 35px 36px); background-position: 0 70px;
  box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 18px 28px -18px rgba(0,0,0,.35); }
.book::before { content: ''; position: absolute; top: 0; bottom: 0; left: 64px; width: 2px; background: #e0807a; }
.book h2 { font-family: Kalam, cursive; font-weight: 700; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; margin-bottom: 18px; }
.book ol { list-style: none; counter-reset: step; font-family: Kalam, cursive; font-size: 21px; line-height: 36px; }
.book li { counter-increment: step; margin-bottom: 36px; position: relative; }
.book li::before { content: counter(step) '.'; position: absolute; left: -44px; font-weight: 700; color: var(--redink); }
.book li strong { display: block; font-weight: 700; }
.book li span { display: block; color: #3d342b; }
.book .btn-paint { font-family: Archivo, Arial, sans-serif; }

/* ── join ────────────────────────────────────────── */
.join { padding: 30px 5vw 90px; }
.join h2 { font-family: 'Bowlby One', Impact, sans-serif; font-size: clamp(32px, 5vw, 56px); line-height: 1.05; }
.join-lead { max-width: 760px; color: var(--soft); margin-top: 14px; font-size: 19px; }
.join-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 46px; }
.sheet { position: relative; background: var(--white); padding: 34px 30px 30px; box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 14px 22px -16px rgba(0,0,0,.35); }
.sheet:nth-child(1) { transform: rotate(-.8deg); }
.sheet:nth-child(2) { transform: rotate(.7deg); }
.sheet h3 { font-family: Kalam, cursive; font-weight: 700; font-size: 26px; margin-bottom: 14px; }
.sheet ul, .sheet ol { padding-left: 22px; margin: 14px 0 24px; }
.sheet li { margin-bottom: 8px; }
.sheet p { color: var(--soft); }

/* ── footer: the bottom of the wall ──────────────── */
.foot { background: var(--green); border-top: 8px solid var(--green-dark); color: var(--white); padding: 30px 5vw; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-family: 'Courier Prime', monospace; font-size: 15px; }
.foot-sign { font-family: 'Bowlby One', Impact, sans-serif; font-size: 26px; background: var(--orange); padding: 2px 12px; border: 3px solid var(--ink); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .top { justify-content: flex-start; gap: 18px; font-size: 14px; }
  .wall-in { padding-top: 30px; padding-right: 7vw; }
  .sign { padding: 14px 18px 16px; box-shadow: 5px 5px 0 var(--ink); max-width: 100%; }
  .sign-main { font-size: clamp(40px, 14vw, 64px); text-shadow: 3px 3px 0 var(--ink); }
  .wall-in { margin-bottom: -46px; flex-direction: column; align-items: flex-start; gap: 0; }
  .board-small { position: absolute; right: 7vw; bottom: -110px; z-index: 3; flex-direction: column; transform: rotate(3deg); }
  .board-small span { font-size: 15px; padding: 3px 10px; }
  .where { position: static; background: var(--green); padding: 64px 34vw 22px 5vw; font-size: 14px; }
  .wall::after { height: 0; border-top-width: 8px; }
  .join-cols { grid-template-columns: 1fr; }
  .book { padding: 34px 20px 34px 62px; }
  .book::before { left: 44px; }
  .book li::before { left: -34px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .poster, .btn-paint { transition: none; } }