/* ==========================================================================
   CamBeezy — Sketchbook theme
   ========================================================================== */

:root{
  --paper:#F3EFE1;
  --paper2:#EAE3CC;
  --ink:#161812;
  --acid:#4E9A2F;
  --acid-dim:#3C7A22;
  --yellow:#F4C93B;
  --white:#FFFDF6;
  --line:rgba(22,24,18,0.18);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Mono', monospace;
}
a{ color:inherit; }
.container{ max-width:820px; margin:0 auto; padding:0 24px; }

/* ---------- Header / nav (contact.html, music.html) ---------- */
.site-header{
  border-bottom:3px solid var(--acid);
  padding:20px 0;
  background:var(--paper);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.logo{
  font-family:'Permanent Marker', cursive;
  font-size:28px;
  color:var(--ink);
  text-shadow:2px 2px 0 var(--yellow);
  text-decoration:none;
}
.nav{ display:flex; gap:22px; }
.nav a{
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  color:var(--ink);
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.nav a:hover, .nav a[aria-current="page"]{
  color:var(--acid-dim);
  border-bottom-color:var(--acid);
}

/* ---------- Generic page section (contact.html, music.html) ---------- */
.section{ padding:50px 0 70px; }
.section h1{
  font-family:'Permanent Marker', cursive;
  font-size:clamp(36px,7vw,56px);
  margin:0 0 6px;
  transform:rotate(-1deg);
}
.subtext{ color:#4A4C3E; margin:0 0 34px; font-size:15px; }

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
@media (max-width:700px){ .grid{ grid-template-columns:1fr; } }

.card{
  background:var(--white);
  border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--acid-dim);
  padding:22px;
}
.h3{
  font-family:'Permanent Marker', cursive;
  font-size:20px;
  margin:0 0 14px;
  color:var(--acid-dim);
}
.card p{ font-size:14px; line-height:1.7; margin:0 0 10px; }
.muted{ color:#7A7C6C; }
.text-link{ color:var(--acid-dim); text-decoration:underline; }

.section-card{ margin-top:22px; }

/* ---------- Form (contact.html) ---------- */
.form label{
  display:block;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin:14px 0 6px;
  color:var(--ink);
}
.form input,
.form textarea{
  width:100%;
  font-family:'Space Mono', monospace;
  font-size:14px;
  padding:10px 12px;
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
}
.form input:focus,
.form textarea:focus{
  outline:none;
  border-color:var(--acid-dim);
  background:var(--white);
}
.btn{
  display:inline-block;
  margin-top:18px;
  padding:11px 20px;
  font-family:'Space Mono', monospace;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  color:var(--ink);
  background:var(--yellow);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--acid);
  cursor:pointer;
  transition:transform .1s ease, box-shadow .1s ease;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--acid); }
.btn.primary{ background:var(--acid); }
.hint{ font-size:11px; color:#7A7C6C; margin-top:10px; }

/* ---------- Footer (contact.html, music.html) ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:24px 0;
  text-align:center;
  font-size:12px;
  color:#7A7C6C;
}

/* ==========================================================================
   Home page (index.html)
   ========================================================================== */

.hero{
  padding:70px 0 40px;
  text-align:center;
  border-bottom:3px solid var(--acid);
  position:relative;
}
.site-title{
  font-family:'Permanent Marker', cursive;
  font-size:clamp(50px,10vw,96px);
  color:var(--ink);
  margin:0;
  line-height:1;
  transform:rotate(-2deg);
  text-shadow:4px 4px 0 var(--yellow);
}
.tagline{
  font-size:14px;
  color:var(--acid);
  margin:18px 0 0;
  letter-spacing:1px;
}
.scribble{ width:120px; margin:20px auto 0; display:block; }

.links{ padding:50px 0; border-bottom:1px solid var(--line); }
.eyebrow{
  font-family:'Permanent Marker', cursive;
  color:var(--acid);
  font-size:22px;
  text-align:center;
  margin:0 0 26px;
  transform:rotate(-1deg);
}
.links-vertical{
  list-style:none; margin:0 auto; padding:0; max-width:380px;
  display:flex; flex-direction:column; gap:10px;
}
.links-vertical a{
  display:block;
  text-align:center;
  padding:12px 16px;
  color:var(--ink);
  background:var(--yellow);
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--acid);
  transition:transform .1s ease, box-shadow .1s ease;
}
.links-vertical a:nth-child(3n+2){ background:var(--acid); }
.links-vertical a:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--acid); }

.videos{ padding:56px 0; border-bottom:1px solid var(--line); text-align:center; }
.video-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.yt{
  width:340px; height:191px; max-width:90vw;
  border:2px solid var(--acid);
  filter:grayscale(0.15);
}

.contact{ padding:54px 0 70px; text-align:center; }
.contact a{ color:var(--acid-dim); text-decoration:underline; }
.footer-box{
  margin:30px auto 0; max-width:340px;
  border:1px dashed var(--acid-dim);
  padding:12px;
  font-size:11px;
  color:#6B6E5C;
}
.footer-box p{ margin:4px 0; }

@media (max-width:640px){
  .bio-wrap{ flex-direction:column; text-align:center; }
}