:root{
  --paper:#f3f1ec;
  --ink:#111;
  --muted:#66625c;
  --line:#bdb9b1;
  --accent:#f0c94c;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:var(--paper);
  font-family:Arial,Helvetica,sans-serif;
}

a{
  color:inherit;
}

/* Header */

.topbar{
  height:72px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:0 24px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}

.top-links,
.top-actions{
  display:flex;
  align-items:center;
  gap:24px;
}

.top-links a,
.top-actions a{
  text-decoration:none;
}

.top-actions{
  justify-content:flex-end;
}

.wordmark{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-decoration:none;
}

.wordmark img{
  display:block;
  width:210px;
  max-width:100%;
  max-height:58px;
  object-fit:contain;
  mix-blend-mode:multiply;
}

/* Hero */

main{
  width:100%;
}

.hero{
  min-height:250px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:38px 24px 28px;
  text-align:center;
}

.hero h1{
  max-width:900px;
  margin:0;
  font-family:"Comic Sans MS","Bradley Hand",cursive;
  font-size:clamp(42px,6vw,78px);
  font-weight:400;
  line-height:.98;
  letter-spacing:1px;
}

.hero-intro{
  max-width:600px;
  margin:24px auto 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}

/* Tools */

.tool-gallery{
  max-width:1180px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:stretch;
  gap:26px;
  margin:0 auto;
  padding:12px 35px 85px;
}

.tool-item{
  min-width:0;
  display:grid;
  grid-template-rows:210px auto;
  align-items:start;
  color:inherit;
  text-align:center;
  text-decoration:none;
}

a.tool-item:hover .scribble-icon{
  transform:translateY(-6px) rotate(-1deg);
}

.scribble-icon{
  width:140px;
  height:190px;
  position:relative;
  align-self:end;
  justify-self:center;
  margin:0 0 20px;
  transition:transform .22s ease;
}

/* Shared drawing rules — required for placeholders to appear */

.scribble-icon::before,
.scribble-icon::after,
.scribble-icon span::before,
.scribble-icon span::after{
  content:"";
  position:absolute;
  box-sizing:border-box;
  border:3px solid var(--ink);
  background:transparent;
}

/* Placeholder 1 */

.icon-tall::before{
  width:40px;
  height:126px;
  left:50px;
  top:30px;
  border-radius:46% 39% 42% 48%;
  transform:rotate(-2deg);
}

.icon-tall::after{
  width:74px;
  height:35px;
  left:33px;
  top:111px;
  border-radius:50%;
  transform:rotate(4deg);
}

.icon-tall span::before{
  width:18px;
  height:18px;
  left:41px;
  top:45px;
  border-radius:50%;
}

.icon-tall span::after{
  width:18px;
  height:18px;
  right:41px;
  top:45px;
  border-radius:50%;
}

/* Placeholder 2 — Book */

.icon-book::before{
  width:96px;
  height:118px;
  left:22px;
  top:36px;
  border-radius:8px 14px 12px 7px;
  transform:rotate(-2deg);
}

.icon-book::after{
  width:7px;
  height:112px;
  left:67px;
  top:39px;
  border-top:0;
  border-bottom:0;
  border-right:0;
  transform:rotate(1deg);
}

.icon-book span::before{
  width:76px;
  height:18px;
  left:32px;
  top:58px;
  border-right:0;
  border-left:0;
  border-bottom:0;
  border-radius:50%;
  transform:rotate(-2deg);
}

.icon-book span::after{
  width:64px;
  height:12px;
  left:37px;
  top:127px;
  border-right:0;
  border-left:0;
  border-bottom:0;
  border-radius:50%;
  transform:rotate(2deg);
}
/* Placeholder 3 — Round */

.icon-round::before{
  width:102px;
  height:112px;
  left:19px;
  top:42px;
  border-radius:46% 53% 44% 55%;
  transform:rotate(2deg);
}

.icon-round::after{
  width:30px;
  height:34px;
  left:29px;
  top:27px;
  border-radius:70% 30% 45% 20%;
  transform:rotate(-16deg);
}

.icon-round span::before{
  width:29px;
  height:35px;
  right:29px;
  top:27px;
  border-radius:30% 70% 20% 45%;
  transform:rotate(16deg);
}

.icon-round span::after{
  width:54px;
  height:14px;
  left:43px;
  top:156px;
  border-right:0;
  border-bottom:0;
  border-left:0;
  border-radius:50%;
}
/* Placeholder 4 */

.icon-box::before{
  width:83px;
  height:105px;
  left:29px;
  top:43px;
  border-radius:12% 18% 10% 14%;
  transform:rotate(2deg);
}

.icon-box::after{
  width:90px;
  height:27px;
  left:25px;
  top:34px;
  border-radius:50%;
  transform:rotate(-2deg);
}

.icon-box span::before{
  width:34px;
  height:34px;
  left:53px;
  top:77px;
  border-radius:50%;
}

.icon-box span::after{
  width:70px;
  height:10px;
  left:35px;
  top:152px;
  border-right:0;
  border-bottom:0;
  border-left:0;
  border-radius:50%;
}

/* Placeholder 5 */

.icon-small::before{
  width:58px;
  height:82px;
  left:41px;
  top:64px;
  border-radius:45% 55% 40% 50%;
  transform:rotate(-4deg);
}

.icon-small::after{
  width:38px;
  height:27px;
  left:51px;
  top:46px;
  border-radius:50%;
}

.icon-small span::before{
  width:12px;
  height:12px;
  left:55px;
  top:85px;
  border-radius:50%;
}

.icon-small span::after{
  width:12px;
  height:12px;
  right:53px;
  top:84px;
  border-radius:50%;
}

/* Tool text */

.tool-copy{
  width:100%;
  padding-top:14px;
  border-top:2px solid var(--ink);
}

.tool-number{
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:11px;
}

.tool-copy h2{
  margin:0 0 11px;
  font-family:"Comic Sans MS","Bradley Hand",cursive;
  font-size:23px;
  font-weight:400;
  line-height:1.05;
}

.tool-copy p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.tool-link{
  display:inline-block;
  margin-top:15px;
  font-size:12px;
  font-weight:700;
}

.unavailable{
  opacity:.55;
}

/* About */

.about{
  max-width:1180px;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:50px;
  margin:0 auto;
  padding:90px 35px;
  border-top:1px solid var(--line);
}

.section-label{
  margin:0;
  color:var(--muted);
  font-size:12px;
  letter-spacing:1.3px;
  text-transform:uppercase;
}

.about h2{
  margin:0 0 22px;
  font-family:"Comic Sans MS","Bradley Hand",cursive;
  font-size:clamp(38px,5vw,70px);
  font-weight:400;
  line-height:1;
}

.about div p{
  max-width:650px;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}

/* Footer */

footer{
  min-height:250px;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:35px;
  padding:30px 24px 55px;
  border-top:1px solid var(--line);
  font-size:13px;
}

footer strong{
  font-family:"Comic Sans MS","Bradley Hand",cursive;
  font-size:20px;
  font-weight:400;
}

footer p{
  margin:5px 0;
  line-height:1.5;
}

footer a{
  text-decoration:none;
}

.footer-note{
  text-align:right;
}

/* Tablet */

@media(max-width:950px){
  .tool-gallery{
    grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:55px;
  }
}

/* Mobile */

@media(max-width:700px){
  .topbar{
    height:64px;
    grid-template-columns:1fr auto;
    padding:0 16px;
  }

  .top-links{
    display:none;
  }

  .wordmark{
    height:64px;
    grid-column:1;
    grid-row:1;
    justify-content:flex-start;
  }

  .wordmark img{
    width:150px;
    max-height:48px;
  }

  .top-actions{
    grid-column:2;
    gap:14px;
  }

  .hero{
    min-height:220px;
    padding:34px 20px 26px;
  }

  .hero h1{
    font-size:clamp(38px,11vw,60px);
  }

  .hero-intro{
    margin-top:20px;
    font-size:15px;
  }

  .tool-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:10px 22px 65px;
  }

  .about{
    grid-template-columns:1fr;
    gap:20px;
    padding:65px 24px;
  }

  footer{
    grid-template-columns:1fr 1fr;
  }

  .footer-note{
    text-align:left;
  }
}

/* Small phones */

@media(max-width:470px){
  .top-actions span{
    display:none;
  }

  .hero{
    min-height:205px;
  }

  .tool-gallery{
    max-width:320px;
    grid-template-columns:1fr;
    gap:50px;
  }

  .scribble-icon{
    margin-bottom:8px;
    transform:scale(.92);
  }

  footer{
    grid-template-columns:1fr;
  }
}