@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Caveat:wght@400;700&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 32px, #E5E5E566 32px, #E5E5E566 33px),
    #F6F8F5;
  color: #0F1715;
  font-size: 17px; line-height: 1.6;
  min-height: 100vh;
}
.sheet { max-width: 800px; margin: 0 auto; padding: 50px 40px; }
.brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; }
.brand-row .scribble { width: 56px; height: 56px; border: 2px solid #0F1715; border-radius: 50%; display: grid; place-items: center; font-family: 'Caveat',cursive; font-size: 32px; font-weight: 700; color: #C9902E; transform: rotate(-4deg); }
.brand-row h2 { font-family: 'Caveat',cursive; font-size: 38px; margin: 0; color: #0F1715; font-weight: 700; }
.brand-row .nav { margin-left: auto; display: flex; gap: 18px; font-size: 18px; font-family: 'Caveat',cursive; }
.brand-row .nav a { color: #0F1715; text-decoration: underline wavy #C9902E; text-underline-offset: 6px; }

h1.scribble {
  font-family: 'Caveat',cursive; font-weight: 700;
  font-size: clamp(48px, 7vw, 88px); line-height: 1.05; letter-spacing: -0.01em;
  margin: 36px 0 14px; color: #0F1715;
}
h1.scribble::after { content: ''; display: block; width: 60%; height: 4px; background: #C9902E; transform: skewY(-1deg); margin-top: 2px; border-radius: 2px; }
.lead-doodle { font-family: 'Inter',sans-serif; font-size: 19px; line-height: 1.5; color: #666666; max-width: 560px; margin: 0 0 30px; }

.cta-circle { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 2.5px solid #0F1715; border-radius: 50px; background: transparent; color: #0F1715; font-weight: 600; text-decoration: none; font-size: 16px; font-family: 'Inter',sans-serif; transform: rotate(-1deg); transition: all 0.2s; }
.cta-circle:hover { background: #C9902E; color: #F6F8F5; border-color: #C9902E; transform: rotate(0); }

.sketch-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin: 40px 0; }
.sketch-item { padding: 22px 0; border-top: 1px dashed #E5E5E5; display: grid; grid-template-columns: 80px 1fr; gap: 18px; }
.sketch-item:first-child { border-top: 0; }
.sketch-item .arrow-num { font-family: 'Caveat',cursive; font-size: 32px; color: #C9902E; transform: rotate(-3deg); padding-top: 4px; }
.sketch-item h3 { font-family: 'Caveat',cursive; font-size: 26px; margin: 0 0 4px; color: #0F1715; font-weight: 700; }
.sketch-item p { margin: 0; font-size: 16px; line-height: 1.6; color: #0F1715; font-family: 'Inter',sans-serif; }

.note-box { margin: 40px 0; padding: 18px 22px; border: 2.5px dashed #C9902E; border-radius: 4px; transform: rotate(-0.5deg); background: #F6F8F5; }
.note-box::before { content: '✎'; font-size: 22px; margin-right: 10px; color: #C9902E; }

footer { font-family: 'Caveat',cursive; font-size: 18px; padding: 30px 40px; max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: #666666; border-top: 2px dashed #E5E5E5; }
footer a { color: #0F1715; }

.long-sketch { max-width: 760px; margin: 0 auto; padding: 50px 40px; }
.long-sketch h1 { font-family: 'Caveat',cursive; font-size: clamp(44px, 5.5vw, 64px); margin: 0 0 6px; color: #0F1715; }
.long-sketch .meta { font-family: 'Caveat',cursive; color: #666666; font-size: 18px; margin-bottom: 36px; }
.long-sketch article { margin: 22px 0; padding: 14px 0; border-bottom: 1px dashed #E5E5E5; }
.long-sketch article h2 { font-family: 'Caveat',cursive; font-size: 26px; margin: 0 0 6px; color: #C9902E; transform: rotate(-1deg); display: inline-block; }
.long-sketch article p { margin: 0; font-family: 'Inter',sans-serif; font-size: 16px; line-height: 1.6; }

.qa-doodle { margin: 28px 0; padding-top: 18px; border-top: 2px solid #0F1715; position: relative; }
.qa-doodle::before { content: ''; position: absolute; top: -4px; left: 0; width: 12px; height: 12px; background: #C9902E; border-radius: 50%; }
.qa-doodle h3 { font-family: 'Caveat',cursive; font-size: 24px; color: #0F1715; margin: 0 0 14px; }
.qa-doodle .qa { margin: 14px 0; }
.qa-doodle .qa h4 { font-family: 'Caveat',cursive; font-size: 22px; color: #C9902E; margin: 0 0 4px; }
.qa-doodle .qa p { font-family: 'Inter',sans-serif; margin: 0; font-size: 15px; line-height: 1.6; }

/* Monoline form — handwritten dashed boxes */
.cf-mono { margin: 30px 0; padding: 26px; border: 3px dashed #0F1715; transform: rotate(-0.3deg); background: #F6F8F5; }
.cf-mono .cf-head h2 { font-family: 'Caveat',cursive; font-weight: 700; font-size: 32px; margin: 0 0 4px; color: #0F1715; transform: rotate(-1deg); display: inline-block; }
.cf-mono .cf-intro { font-family: 'Inter',sans-serif; font-size: 16px; color: #666666; margin: 0 0 22px; }
.cf-mono .cf-fields { display: grid; gap: 18px; }
.cf-mono .cf-label { display: grid; gap: 6px; position: relative; }
.cf-mono .cf-label > span { font-family: 'Caveat',cursive; font-size: 22px; color: #C9902E; transform: rotate(-2deg); display: inline-block; align-self: start; }
.cf-mono input, .cf-mono textarea { font-family: 'Indie Flower',cursive; font-size: 18px; padding: 10px 14px; border: 2.5px dashed #0F1715; background: transparent; color: #0F1715; border-radius: 0; }
.cf-mono input:focus, .cf-mono textarea:focus { outline: none; border-color: #C9902E; border-style: solid; }
.cf-mono textarea { min-height: 120px; resize: vertical; }
.cf-mono .cf-hp { display: none; }
.cf-mono .cf-actions { margin-top: 22px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.cf-mono .cf-submit { font-family: 'Caveat',cursive; font-size: 24px; padding: 10px 26px; background: transparent; color: #0F1715; border: 3px solid #0F1715; border-radius: 50px; cursor: pointer; transform: rotate(-1deg); }
.cf-mono .cf-submit:hover { background: #C9902E; color: #F6F8F5; border-color: #C9902E; }
.cf-mono .cf-direct { font-family: 'Caveat',cursive; font-size: 18px; color: #666666; }
.cf-mono .cf-direct a { color: #0F1715; text-decoration: underline wavy #C9902E; }