/* Cassi Kaplan — cassikaplan.com — crayon edition */
:root {
  --paper: #f7f3ea;
  --ink: #141414;
  --blue: #1f5fe0;
  --orange: #ff6b1a;
  --yellow: #ffcf1f;
  --pink: #ff4f9a;
  --green: #22b35e;
  --purple: #7b4dff;
  --gutter: clamp(20px, 3.5vw, 56px);
  --fs: clamp(20px, 2.6vw, 38px);
  --fs-hand: clamp(20px, 2.6vw, 36px);
  --fs-small: clamp(17px, 1.7vw, 24px);
  --hand: "Shantell Sans", "Comic Sans MS", "Chalkboard SE", cursive;
  --grot: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--grot);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* paper grain */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible {
  text-decoration: underline wavy var(--orange);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.16em;
  outline: none;
}

main { position: relative; z-index: 1; padding: var(--gutter) var(--gutter) calc(var(--gutter) * 3); max-width: 1500px; margin: 0 auto; }

.hand { font-family: var(--hand); font-weight: 700; letter-spacing: -0.01em; }

/* doodles */
.doodle { position: absolute; pointer-events: none; overflow: visible; }
.doodle.blue { color: var(--blue); }  .doodle.orange { color: var(--orange); }
.doodle.yellow { color: var(--yellow); } .doodle.pink { color: var(--pink); }
.doodle.green { color: var(--green); } .doodle.purple { color: var(--purple); }
.doodle.ink { color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2em 3em; align-items: end; padding-bottom: 1.5em; }
.hero h1 {
  position: relative; margin: 0; z-index: 1;
  font-family: var(--grot); font-weight: 700; letter-spacing: -0.045em; line-height: 0.92;
  font-size: clamp(56px, 11vw, 168px);
}
.hero h1 .smiley { position: absolute; z-index: -1; width: 2.05em; height: 2.05em; left: -0.12em; top: -0.22em; color: var(--orange); }
.hero .tag { margin: 0.5em 0 0; font-family: var(--hand); font-weight: 700; font-size: var(--fs-hand); color: var(--blue); transform: rotate(-1.5deg); transform-origin: left; }
.hero .tag .hi { display: inline-block; background: var(--yellow); padding: 0 0.25em; transform: rotate(1.5deg); }

.portrait { position: relative; width: clamp(150px, 20vw, 260px); aspect-ratio: 1; transform: rotate(3deg); }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; border-radius: 3px; }
.portrait .frame { inset: -4%; width: 108%; height: 108%; color: var(--pink); }
.portrait .hat { width: 34%; height: 40%; left: 33%; top: -30%; color: var(--blue); transform: rotate(-8deg); }
.portrait .star1 { width: 18%; height: 18%; right: -12%; top: 6%; color: var(--yellow); }
.portrait .star2 { width: 12%; height: 12%; left: -10%; top: 30%; color: var(--orange); transform: rotate(20deg); }
.portrait .heart { width: 16%; height: 16%; right: -8%; bottom: 8%; color: var(--pink); transform: rotate(12deg); }

.bio { position: relative; font-size: var(--fs); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; max-width: 30ch; margin: 1.2em 0 0; text-wrap: pretty; }
.bio mark { background: none; color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background-image: linear-gradient(104deg, transparent 0.4em, var(--yellow) 0.5em, var(--yellow) calc(100% - 0.4em), transparent calc(100% - 0.3em));
  padding: 0 0.2em; }
.bio .arrow { width: 120px; height: 52px; left: 45%; bottom: -95px; color: var(--green); transform: rotate(72deg); }

/* ---------- sections ---------- */
section { position: relative; margin-top: 3.5em; }
.section-head { position: relative; display: flex; align-items: baseline; gap: 0.6em; margin-bottom: 0.4em; }
.section-head h2 {
  position: relative; margin: 0; font-family: var(--hand); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(38px, 6vw, 84px); line-height: 1; transform: rotate(-1.2deg); transform-origin: left bottom;
}
.section-head h2 .under { position: absolute; left: -2%; right: -3%; bottom: -0.16em; height: 0.28em; width: 105%; }
.section-head .note { font-family: var(--hand); font-weight: 500; font-size: var(--fs-small); color: var(--blue); transform: rotate(2deg); white-space: nowrap; }
.section-head .deco { width: clamp(60px, 7vw, 110px); height: clamp(60px, 7vw, 110px); right: 0; top: -60%; }

.rows { position: relative; }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 1.5em; align-items: baseline;
  padding: 0.34em 0 0.3em; font-size: var(--fs);
}
.row > .v { text-align: right; }
.row .v.hand { font-size: var(--fs-hand); font-weight: 600; color: var(--blue); }
.row:nth-child(4n+2) .v.hand { color: var(--orange); }
.row:nth-child(4n+3) .v.hand { color: var(--green); }
.row:nth-child(4n+4) .v.hand { color: var(--pink); }
.row.tight { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.row.tight .v { font-family: var(--hand); font-weight: 600; }

/* testimonials as scattered scraps */
.scraps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em 3em; padding: 1.2em 0 1em; }
.scrap { position: relative; margin: 0; font-family: var(--hand); font-weight: 600; font-size: var(--fs-hand); line-height: 1.15; padding: 1.1em 0.2em 0.4em; max-width: 26ch; }
.scrap .who { display: block; margin-top: 0.5em; font-family: var(--grot); font-weight: 600; font-size: var(--fs-small); color: var(--ink); opacity: 0.75; }
.scrap:nth-child(1) { color: var(--blue); transform: rotate(-1.5deg); }
.scrap:nth-child(2) { color: var(--orange); transform: rotate(1deg); }
.scrap:nth-child(3) { color: var(--green); transform: rotate(-0.8deg); }
.scrap:nth-child(4) { color: var(--purple); transform: rotate(1.4deg); }
.scrap .bubble { width: 46px; height: 34px; left: -4px; top: -6px; }

/* thoughts */
.thoughts .row { grid-template-columns: 2.4em minmax(0, 1fr); font-size: var(--fs-small); font-weight: 600; padding: 0.55em 0 0.5em; }
.thoughts .row .n { font-family: var(--hand); font-weight: 700; color: var(--orange); font-size: 1.1em; }
.thoughts .row:nth-child(3n) .n { color: var(--blue); } .thoughts .row:nth-child(3n+1) .n { color: var(--pink); }
.thoughts .row .v { text-align: left; }
.thoughts .cloud { width: clamp(90px, 10vw, 150px); height: auto; right: 2%; top: -2%; }
.thoughts .spiral { width: 70px; height: 70px; right: 0; bottom: -70px; }

/* footer */
footer { position: relative; margin-top: 4em; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1em 2em; font-size: var(--fs); }
footer .cta { position: relative; display: inline-block; padding: 0.15em 0.5em; font-family: var(--hand); font-weight: 800; font-size: clamp(28px, 4vw, 56px); }
footer .cta .circle { left: -14%; top: -42%; width: 128%; height: 184%; color: var(--pink); }
footer .kiss { width: 120px; height: 36px; right: 0; top: -60px; color: var(--pink); }
footer .copy { font-size: var(--fs-small); font-weight: 500; }
footer .copy .top { font-family: var(--hand); color: var(--blue); }

/* project pages */
.project-title .smiley { width: 1.35em; height: 1.35em; left: -0.15em; top: -0.2em; }
.project-images { display: grid; gap: var(--gutter); margin-top: 1.5em; }
.project-images img { display: block; width: 100%; height: auto; max-width: 1035px; mix-blend-mode: multiply; border-radius: 2px; }
.project-images figure { position: relative; margin: 0; max-width: 1035px; }
.project-images figure:nth-child(odd) { transform: rotate(-0.8deg); }
.project-images figure:nth-child(even) { transform: rotate(0.7deg); }
.project-images figure .frame { inset: -1.5%; width: 103%; height: 103%; color: var(--blue); }
.project-images figure:nth-child(3n) .frame { color: var(--orange); }
.project-images figure:nth-child(3n+2) .frame { color: var(--green); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 1.2em; }
  .hero h1 { font-size: clamp(56px, 16vw, 120px); }
  .portrait { width: 44vw; margin: 1.5em 0 0.5em 0.5em; }
  .row { grid-template-columns: 1fr; gap: 0.05em 0; }
  .row > .v { text-align: left; }
  .row.tight { grid-template-columns: max-content minmax(0, 1fr); gap: 0 0.6em; }
  .row.tight > .v { text-align: right; }
  .thoughts .row { grid-template-columns: 2.2em minmax(0, 1fr); }
  .bio .arrow { left: 55%; bottom: -80px; width: 90px; height: 40px; }
  .section-head { flex-wrap: wrap; gap: 0.2em 0.6em; }
  .section-head .deco { width: 56px; height: 56px; top: -70%; }
  .scraps { grid-template-columns: 1fr; gap: 1em; }
  .scrap { max-width: none; }
  .thoughts .spiral { display: none; }
  footer .kiss { top: -50px; width: 90px; height: 28px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }