:root{
  --ink:#13233e; --ink2:#3a4a66; --faint:#8a93a6; --paper:#ffffff;
  --line:#23304a; --accent:#2e7d32;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Gaegu","Comic Sans MS",system-ui,sans-serif; font-weight:400;
  font-size:19px; line-height:1.55;
  background-image:radial-gradient(rgba(19,35,62,.025) 1px, transparent 1px);
  background-size:22px 22px;            /* faint paper grid */
}
a{color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(19,35,62,.25)}
a:hover{border-bottom-color:var(--ink)}
h1,h2,h3,.brand{font-family:"Caveat",cursive; font-weight:700; line-height:1.05; color:var(--ink)}
h1{font-size:3.1rem; margin:.2em 0}
h2{font-size:2.2rem; margin:1.4em 0 .5em}

/* nav */
.nav{display:flex; align-items:center; justify-content:space-between;
  max-width:1040px; margin:0 auto; padding:18px 24px; border-bottom:2px solid var(--ink);
  border-image:none}
.brand{font-size:2rem; border:none}
.nav nav a{margin-left:22px; font-size:1.05rem; border:none; color:var(--ink2)}
.nav nav a:hover{color:var(--ink)}

main{max-width:1040px; margin:0 auto; padding:26px 24px 60px}

/* hero / forms */
.hero{text-align:center; padding:34px 0 10px}
.hero h1{font-size:4rem}
.sub{color:var(--ink2); font-size:1.12rem; max-width:620px; margin:.4em auto 1.4em}
.field{display:block; text-align:left; margin:14px 0}
.field span{display:block; font-size:1rem; color:var(--ink2); margin-bottom:4px}
.field em{color:var(--faint); font-style:italic; font-size:.9em}
textarea,input{width:100%; font-family:inherit; font-size:1.05rem; color:var(--ink);
  background:transparent; border:2px solid var(--ink); padding:10px 12px;
  border-radius:18px 6px 20px 6px/6px 20px 6px 18px}   /* hand-drawn box */
textarea:focus,input:focus{outline:none; border-color:var(--accent)}
.row{display:flex; gap:18px; flex-wrap:wrap}
.row .field{flex:1; min-width:220px}

/* sketchy box + buttons */
.sketch-box{border:2.5px solid var(--ink); background:#fff;
  border-radius:255px 14px 225px 14px/14px 225px 14px 255px; padding:22px 26px; margin:18px auto}
.ask{max-width:640px}
.ink-btn{display:inline-block; cursor:pointer; font-family:"Caveat",cursive; font-weight:700;
  font-size:1.35rem; color:var(--ink); background:#fff; border:2.5px solid var(--ink);
  padding:6px 22px; margin:6px 4px; border-radius:14px 220px 16px 220px/220px 16px 220px 14px}
.ink-btn:hover{background:var(--ink); color:#fff}
.ink-btn.big{font-size:1.7rem; padding:8px 30px}
button.ink-btn{line-height:1.2}

/* gallery grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:22px; margin-top:18px}
.card{margin:0; text-align:center}
.card a{border:none}
.card img{width:100%; height:200px; object-fit:contain; background:#fff;
  border:2px solid var(--ink); padding:8px;
  border-radius:14px 6px 16px 6px/6px 16px 6px 14px}
.card figcaption{font-family:"Caveat",cursive; font-size:1.4rem; margin-top:6px; color:var(--ink)}
.card small{font-family:"Gaegu"; font-size:.8rem; color:var(--faint)}

/* real-paper photos */
.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; margin-top:18px}
.photo{margin:0; text-align:center}
.photo img{width:100%; aspect-ratio:4/3; object-fit:cover; background:#fff;
  border:2px solid var(--ink); padding:6px;
  border-radius:18px 6px 20px 6px/6px 20px 6px 18px;
  box-shadow:3px 4px 0 rgba(19,35,62,.07)}
.photo figcaption{font-family:"Caveat",cursive; font-size:1.5rem; margin-top:8px; color:var(--ink)}
.photo.opt form{margin-top:8px}
h2.more{margin-top:48px; color:var(--ink2)}

/* about page */
.about .framed{display:block; max-width:860px; margin:8px auto 0}
.spec{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin-top:26px; text-align:left}
.spec .sketch-box{margin:0; padding:18px 22px}
.spec h2{margin:0 0 6px; font-size:1.7rem}
.spec p{color:var(--ink2); margin:0; line-height:1.5}

/* plotting line */
.qrow.line{align-items:center}
.pos{font-family:"Caveat",cursive; font-size:1.6rem; min-width:92px; text-align:center; color:var(--ink2)}
.pos .now{display:inline-block; font-family:"Gaegu"; font-size:.9rem; color:#2e7d32; border:2px solid #2e7d32;
  border-radius:14px 6px 16px 6px/6px 16px 6px 14px; padding:3px 9px; line-height:1.1}

/* queue */
.page h1{text-align:center}
.qrow{display:flex; align-items:center; gap:18px; max-width:760px; padding:14px 20px}
.vote{margin:0}
.vote button{font-family:"Caveat",cursive; cursor:pointer; background:#fff; border:2px solid var(--ink);
  color:var(--ink); border-radius:50% 50% 48% 52%/52% 50% 50% 48%; width:54px; height:54px;
  font-size:1.1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1}
.vote button:hover{background:var(--ink); color:#fff}
.vote button span{font-size:1.3rem; font-weight:700}
.qbody .prompt{font-size:1.2rem; margin:.1em 0}
.meta{color:var(--faint); font-size:.95rem; margin:.1em 0}

/* status badges */
.badge{font-family:"Gaegu"; font-size:.8rem; padding:2px 10px; border:1.5px solid var(--ink2);
  border-radius:12px 4px 12px 4px/4px 12px 4px 12px; color:var(--ink2)}
.badge.pending{color:#9a6b00; border-color:#ca9a3a}
.badge.approved{color:#2e7d32; border-color:#2e7d32}
.badge.plotting{color:#1565c0; border-color:#1565c0}
.badge.done{color:#13233e; border-color:#13233e}
.badge.rejected{color:#b23b3b; border-color:#b23b3b}

/* piece */
.piece{text-align:center}
.framed{display:inline-block; max-width:720px}
.big{max-width:100%; display:block}
.dl{margin-top:16px}

/* misc */
.flash{max-width:640px; margin:14px auto; text-align:center; color:#b23b3b;
  border:2px dashed #d8a; border-radius:16px; padding:8px 14px; background:#fff7f7}
.empty{text-align:center; color:var(--ink2)}
.tip{font-family:"Caveat",cursive; font-size:1.25rem; border:none; color:var(--accent)}
.admin{width:100%; border-collapse:collapse; font-size:.95rem}
.admin th,.admin td{border-bottom:1px solid #eee; padding:6px 8px; text-align:left}
code{font-family:ui-monospace,monospace; font-size:.8rem; background:#f6f6f3; padding:2px 6px; border-radius:6px}

footer{max-width:1040px; margin:0 auto; padding:24px; border-top:2px solid var(--ink);
  display:flex; justify-content:space-between; align-items:center; color:var(--faint); flex-wrap:wrap; gap:10px}

@media(max-width:560px){ h1{font-size:2.4rem} .hero h1{font-size:3rem} body{font-size:18px} }