/* MadSkrols Studios: sketchbook landing page */

@font-face {
  font-family: "Galindo";
  src: url("../fonts/Galindo-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #f7f2e5;
  --paper-2: #efe7d3;
  --sheet: #fffdf6;
  --graphite: #2f2f33;
  --graphite-soft: #6c6a66;
  --line: #c9c0aa;
  --hl: #ffc52e;
  --green: #073f22;
  --red: #d6453d;
  --blue: #2c5e9e;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { margin: 0; }

body {
  font-family: "Kalam", cursive;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  color: var(--graphite);
  /* dot-grid paper with a little grain */
  background:
    radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .13) 1.1px, transparent 1.4px) 0 0 / 26px 26px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .35  0 0 0 0 .2  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    var(--paper);
  overflow-x: hidden;
}

img { max-width: 100%; }
a:focus-visible,
.btn:focus-visible { outline: 3px dashed var(--blue); outline-offset: 4px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wobble { filter: url(#wobble); }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: "Galindo", cursive; font-weight: 400; margin: 0; line-height: 1; }
.note { font-family: "Caveat", cursive; color: var(--blue); font-size: 26px; line-height: 1.1; }
.hl {
  background: linear-gradient(transparent 52%, rgba(255, 197, 46, .85) 52%, rgba(255, 197, 46, .85) 88%, transparent 88%);
  padding: 0 4px;
}

/* ---------- spiral binding ---------- */
.spiral {
  height: 46px;
  position: relative;
  background:
    radial-gradient(circle at 50% 70%, #2a2a2a 0 6px, transparent 7px) 0 0 / 40px 46px repeat-x,
    linear-gradient(var(--paper-2), var(--paper-2));
  border-bottom: 1px solid var(--line);
}
.spiral::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 17px, #9b9b9b 17px 23px, transparent 23px) 0 -10px / 40px 34px repeat-x;
  opacity: .9;
}

/* ---------- nav ---------- */
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px 0 10px; }
.site-nav img { height: 46px; width: auto; display: block; }
.site-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; font-family: "Caveat", cursive; font-size: 26px; }
.site-nav a { color: var(--graphite); text-decoration: none; }
.site-nav a:hover { text-decoration: underline wavy var(--hl) 3px; text-underline-offset: 6px; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.45fr .8fr; gap: 40px; align-items: center; padding: 50px 0 80px; position: relative; }
.hero h1 {
  font-size: clamp(46px, 6.4vw, 88px);
  line-height: 1;
  /* pencil-shaded lettering */
  background: repeating-linear-gradient(-55deg, var(--graphite) 0 2px, #4a4a50 2px 3.2px, var(--graphite) 3.2px 5px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: url(#pencil);
}
.hero .lede { font-size: 24px; max-width: 560px; margin: 28px 0 0; }
.hero .actions { display: flex; gap: 22px; align-items: center; margin-top: 34px; flex-wrap: wrap; }

.btn {
  font-family: "Galindo", cursive;
  font-size: 22px;
  color: var(--paper);
  background: var(--green);
  padding: 14px 28px;
  text-decoration: none;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 3px 4px 0 var(--graphite);
  display: inline-block;
  transition: transform .15s ease;
}
.btn:hover { transform: translate(-1px, -2px) rotate(-1deg); }
.link { font-family: "Caveat", cursive; font-size: 26px; color: var(--graphite); }

/* desk doodles */
.desk { position: relative; height: 440px; }
.desk svg, .desk .sticker, .desk .note { position: absolute; }
.desk .sticker { width: 210px; height: 210px; right: 10px; top: -10px; transform: rotate(8deg); border-radius: 18px; box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.desk .pencil { width: 330px; left: 0; top: 40px; transform: rotate(-18deg); }
.desk .cube { width: 170px; left: 20px; top: 170px; }
.desk .bulb { width: 150px; right: 40px; top: 180px; }
.desk .note { left: 190px; top: 330px; transform: rotate(-6deg); }

/* ---------- sections ---------- */
section { padding: 60px 0; }
.sec-head { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin-bottom: 36px; }
.sec-head h2 { font-size: clamp(38px, 5vw, 64px); }
.rule {
  height: 14px;
  margin: 0 0 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'><path d='M2 8 C 80 3, 160 12, 250 7 S 420 3, 598 8' stroke='%232f2f33' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}

/* ---------- sketchbook pages ---------- */
.pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 34px; }
.page {
  background: var(--sheet);
  padding: 22px 22px 26px;
  position: relative;
  box-shadow: 0 1px 0 var(--line), 0 12px 26px -12px rgba(60, 40, 10, .35);
  background-image: linear-gradient(transparent 31px, #dfe8f1 31px 32px);
  background-size: 100% 32px;
}
.page:nth-child(1) { transform: rotate(-1.6deg); }
.page:nth-child(2) { transform: rotate(1deg) translateY(16px); }
.page:nth-child(3) { transform: rotate(-.6deg); }
.page .torn {
  position: absolute; left: 0; right: 0; top: -8px; height: 10px;
  background: radial-gradient(circle at 6px 10px, var(--sheet) 5px, transparent 5.5px) 0 0 / 12px 10px repeat-x;
}
.page .sketch { height: 210px; display: flex; align-items: center; justify-content: center; }
.page .sketch svg { max-width: 100%; height: auto; }
.page h3 { font-size: 28px; margin-top: 12px; }
.page p { margin: 8px 0 0; font-size: 18px; }
.page .status { font-family: "Caveat", cursive; font-size: 22px; margin-top: 12px; display: inline-block; text-decoration: none; }
.status.live { color: var(--green); }
.status.live::before { content: "● "; }
a.status.live:hover { text-decoration: underline wavy var(--hl) 2px; text-underline-offset: 5px; }
.status.wip { color: var(--red); }
.status.wip::before { content: "✎ "; }

/* ---------- scribble back ---------- */
.cta {
  position: relative;
  margin: 40px auto 0;
  max-width: 780px;
  text-align: center;
  padding: 60px 40px;
  background: #fff6b8;
  transform: rotate(-1deg);
  box-shadow: 0 18px 30px -16px rgba(80, 60, 0, .45);
}
.cta::before {
  content: "";
  position: absolute; top: -16px; left: 50%;
  width: 130px; height: 32px; margin-left: -65px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(0, 0, 0, .05);
  transform: rotate(2deg);
}
.cta h2 { font-size: clamp(32px, 4.2vw, 50px); }
.cta p { font-size: 22px; margin: 16px auto 28px; max-width: 580px; }
.cta .ps { font-family: "Caveat", cursive; font-size: 22px; color: var(--blue); margin: 22px 0 0; }

/* ---------- footer ---------- */
.site-footer { padding: 70px 0 40px; text-align: center; font-family: "Caveat", cursive; font-size: 22px; color: var(--graphite-soft); }
.site-footer img { width: 80px; height: 80px; display: block; margin: 0 auto 10px; opacity: .85; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .desk { height: 340px; }
  .site-nav ul { gap: 14px; font-size: 21px; }
  .site-nav li { white-space: nowrap; }
  .pages { grid-template-columns: 1fr; }
  .page { transform: none !important; }
}

@media (max-width: 480px) {
  body { font-size: 18px; }
  .hero .lede { font-size: 21px; }
  .desk { height: 350px; }
  .desk .sticker { width: 160px; height: 160px; }
  .desk .pencil { width: 250px; }
  .desk .cube { width: 130px; top: 150px; }
  .desk .bulb { width: 115px; right: 10px; top: 160px; }
  .desk .note { left: 110px; top: 300px; }
  .cta { padding: 44px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}