:root {
  --rule: 34px;            /* line spacing — everything vertical is a multiple of this */
  --margin-x: min(15vw, 6.6rem);   /* 15% of the sheet (max-width 44rem); clears the
                                      photo's red margin line, which sits at 11% */
  --ink: #2b4a7d;
  --margin-red: #eda2ab;
  --paper: #fffdf6;
}

* { box-sizing: border-box; }

html { background: #e4e0d4; }

/* The sheet: a photo of real crumpled college-ruled paper. Its rules are wavy,
   so text deliberately does not sit on them — --rule is just vertical rhythm. */
body {
  max-width: 44rem;
  aspect-ratio: 3 / 4;         /* the paper's own proportions — never cropped */
  margin: 2rem auto;
  padding: calc(var(--rule) * 2) 2.5rem calc(var(--rule) * 2) var(--margin-x);
  color: var(--ink);
  font-family: Caveat, "Bradley Hand", "Segoe Print", cursive;
  font-size: 22px;
  line-height: var(--rule);
  /* Box matches the photo's ratio, so this shows all of it with no crop. */
  background: var(--paper) url(paper.jpg) center / 100% 100%;
  box-shadow: 0 0 40px rgba(0,0,0,0.13);
}

.defs { position: absolute; width: 0; height: 0; }

h1 {
  font-size: 3rem;
  font-weight: 600;
  line-height: calc(var(--rule) * 2);
  margin: 0;
  transform: rotate(-1.2deg);      /* written by hand, not typeset */
  transform-origin: left center;
}

/* Scanned handwriting: white keyed out, ink recoloured to --ink. */
.handwritten {
  display: block;
  width: min(72%, 340px);
  height: auto;
}

.tagline { margin: 0 0 calc(var(--rule) * 2); }
.cliche {
  text-decoration: line-through;
  text-decoration-color: var(--margin-red);
  text-decoration-thickness: 3px;
  color: var(--ink);
  opacity: 0.5;
}

a { color: inherit; text-decoration: none; }

.apps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  padding: 0;
  margin: 0 0 calc(var(--rule) * 2);
}
.apps a { display: block; text-align: center; }
.apps li:nth-child(odd)  .sketch { transform: rotate(-2deg); }
.apps li:nth-child(even) .sketch { transform: rotate(1.5deg); }

.sketch {
  display: block;
  width: 132px;
  height: 132px;
  color: var(--ink);
  transition: transform 0.2s ease;
}
.apps a:hover .sketch,
.apps a:focus-visible .sketch { transform: rotate(0deg) scale(1.05); }

/* Name is revealed on hover. The span always holds its space, so nothing jumps. */
.apps span {
  display: block;
  margin-top: 0.4rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.apps a:hover span,
.apps a:focus-visible span { opacity: 1; }

/* No hover on touch — show the names outright rather than hide them forever. */
@media (hover: none) {
  .apps span { opacity: 1; }
}

footer a {
  border-bottom: 2px solid var(--margin-red);   /* underlined by hand */
  padding-bottom: 1px;
}
footer a:hover { border-bottom-color: var(--ink); }

@media (max-width: 34rem) {
  body { padding-right: 1.25rem; }
  h1 { font-size: 2.4rem; }
  .apps { gap: 1.5rem; }
}