body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  color: #222;
  background-color: #fdfdfd;
  margin: 0;
}

.person-interests {
  max-width: 65ch;         /* ~65 characters per line */
  margin-inline: auto;     /* centers the block, not the text */
  padding: 2rem 1.5rem;    /* vertical | horizontal */
}

.banner {
  display: block;          /* kills the inline-image gap below it */
  width: 100%;
  height: auto;            /* keeps the aspect ratio */
  border-radius: 10px;
  margin-bottom: 2.5rem;
}

h1 {
  font-size: 2.25rem;
  line-height: 1.2;
  margin-top: 0;           /* banner's margin owns the gap above */
  margin-bottom: 2rem;
}

h2 {
  display: flex;           /* puts the icon and text on one row */
  align-items: center;
  gap: 0.6rem;
  font-size: 1.35rem;
  line-height: 1.2;
  margin-top: 2.5rem;
  margin-bottom: .5rem;
  padding-left: 0.75rem;
  border-left: 4px solid #3a7ca5;
}

.icon {
  width: 1.15em;           /* em: scales with the heading's font-size */
  height: 1.15em;
  flex-shrink: 0;          /* stops it squashing on narrow screens */
}

p {
  margin-top: 0;
}

/* ---- Lists ---- */

/* Top level = the cuisines. No bullet: the rule down the nested group is
   already the grouping signal, and a marker too would say it twice. */
.cuisines {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* li + li, not li, so the first one stays tucked under the heading. */
.cuisines > li + li {
  margin-top: 1.1rem;
}

.cuisines > li {
  font-weight: 600;
}

/* Nested = the dishes. One continuous rule echoes the h2 border at a
   lighter weight -- repeating an existing motif is what makes a new
   element look like it belongs rather than like it was bolted on. */
.cuisines ul {
  list-style: none;
  font-weight: 400;       /* undo the 600 inherited from the parent li */
  padding-left: 0.9rem;
  margin: 0.4rem 0 0;
  border-left: 2px solid #cfe0ea;
}

.cuisines ul li {
  padding: 0.1rem 0;
}

/* Hover on the dishes. The li is positioned so the ::before can be laid
   exactly over the parent ul's border, lighting up just that segment of
   the rule -- reusing the motif rather than introducing a new one. */
.cuisines ul li {
  position: relative;
  transition: color .16s ease, padding-left .16s ease;
}

.cuisines ul li::before {
  content: "";
  position: absolute;
  left: calc(-0.9rem - 2px);   /* the ul's padding, plus its 2px border */
  top: 0;
  bottom: 0;
  width: 2px;
  background: #3a7ca5;
  opacity: 0;
  transition: opacity .16s ease;
}

/* hover:hover keeps this off touch screens, where :hover can stick
   after a tap and leave an item highlighted with no way to clear it. */
@media (hover: hover) {
  .cuisines ul li:hover {
    color: #3a7ca5;
    padding-left: 0.35rem;
  }

  .cuisines ul li:hover::before {
    opacity: 1;
  }
}

/* Cuisine names. The name is wrapped in a span so that hovering a dish
   does not also light up its cuisine -- a bare `.cuisines > li:hover`
   fires for descendants too, so hovering "Pizza" would highlight
   "American" as well. The span also keeps the nested list out of the
   hover target, so the dish rule below stays put instead of jogging
   sideways when the name shifts. */
.cuisine {
  position: relative;
  display: inline-block;
  transition: color .16s ease, padding-left .16s ease;
}

.cuisine::before {
  content: "";
  position: absolute;
  left: 0;            /* lines up exactly above the dish rule below */
  top: 0.15em;        /* inset to the text's cap height, not the line box */
  bottom: 0.15em;
  width: 2px;
  background: #3a7ca5;
  opacity: 0;
  transition: opacity .16s ease;
}

@media (hover: hover) {
  .cuisine:hover {
    color: #3a7ca5;
    padding-left: 0.35rem;
  }

  .cuisine:hover::before {
    opacity: 1;
  }
}

/* Headings respond as one unit: the icon grows, the text takes the accent.
   width: max-content shrinks the h2's box to its own text so the hover
   target is the heading rather than the whole column -- and because the
   box stays block-level, the margin collapsing that sets the heading
   rhythm is untouched. max-width guards a heading longer than the column. */
h2 {
  width: max-content;
  max-width: 100%;
  transition: color .16s ease;
}

/* transform, not width/height: scaling is composited, so the icon grows
   without reflowing the text beside it. */
.icon {
  transition: transform .18s ease;
}

@media (hover: hover) {
  h2:hover {
    color: #3a7ca5;
  }

  h2:hover .icon {
    transform: scale(1.18);
  }
}