/* About page options (8.10). Extra rules on top of style.css, only for about-a.html and about-b.html.
   Tokens only; nothing new in color or type. Rotation uses the `rotate` property, not transform (data-reveal sets transform). */

.loves { padding: 0 0 var(--s12); }
.loves h2 { margin-bottom: var(--s4); }
.love-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.love-list li { display: grid; gap: 4px; padding-top: var(--s2); border-top: 1px solid var(--color-line); }
.love-list strong { font: 600 var(--t-16)/1.4 var(--font-head); letter-spacing: -0.01em; }
.love-list span { color: var(--color-content-secondary); }
.caption { margin: var(--s2) 0 0; font-size: var(--t-14); line-height: 1.5; color: var(--color-content-secondary); }

/* Option A: the personal photo as an object, tilted a little, with its caption; the list beside it */
.loves-a { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--s8); align-items: start; }
.keepsake { margin: 0; }
.keepsake img { width: 100%; aspect-ratio: 1034 / 924; object-fit: cover; background: var(--color-surface-page); padding: var(--s1); border: 1px solid var(--color-line); border-radius: var(--radius-s); rotate: -1.5deg; }
.keepsake .caption { max-width: 36ch; }

/* Option B: a greeting, a small round portrait beside the intro, the personal photo as a wide figure after the list */
.hello { padding: var(--s12) 0 var(--s8); }
.hello-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.hello-photo { margin: 0; }
.hello-photo img { width: 200px; height: 200px; object-fit: cover; object-position: 50% 24%; border-radius: 999px; background: var(--color-surface-subtle); }
.hello-text { display: grid; gap: var(--s3); align-content: start; }
.hello-text h1 { font-size: var(--t-64); line-height: 1.05; }
.hello-lead { margin: 0; font-size: var(--t-20); line-height: 1.5; max-width: 34ch; }
.about-body-b { display: grid; gap: var(--s2); max-width: var(--measure); color: var(--color-content-secondary); }
.about-body-b p { margin: 0; }
.love-cards { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.love-cards li { display: grid; gap: 4px; align-content: start; padding: var(--s3); background: var(--color-surface-subtle); border-radius: var(--radius); }
.love-cards strong { font: 600 var(--t-16)/1.4 var(--font-head); letter-spacing: -0.01em; }
.love-cards span { color: var(--color-content-secondary); }
.wide-photo { margin: 0; max-width: 760px; }
.wide-photo img { width: 100%; aspect-ratio: 1034 / 924; object-fit: cover; border-radius: var(--radius); background: var(--color-surface-subtle); }

@media (max-width: 900px) {
  .loves-a { grid-template-columns: 1fr; gap: var(--s6); }
  .keepsake { max-width: 420px; }
  .hello { padding: var(--s8) 0 var(--s6); }
  .hello-grid { grid-template-columns: 1fr; gap: var(--s3); }
  .hello-photo img { width: 128px; height: 128px; }
  .love-cards { grid-template-columns: 1fr; }
}

/* About on phones (15.10, her reference): no "About" label; the page starts with "Hi, I'm Yulia.", then the portrait, then the text. The heading and the text are siblings of the portrait in the grid so they can be ordered; desktop is unchanged. */
@media (max-width: 900px) {
  .about-head { display: none; }
  .about-grid { gap: var(--s4); }
  .about-text { display: contents; }
  .about-text > * { order: 3; }
  .about-text > h1 { order: 1; }
  .about-grid > .portrait { order: 2; }
}

/* Emoji before each hobby title (15.10, her idea; croissant for Baking is hers). Decoration only: hidden from screen readers. */
.love-list .emo { margin-right: 8px; color: inherit; }