/* Site-level additions on top of tokens.css + components.css (both used as-is).
   Only what the components leave to the consumer: page reset and the small-screen menu sheet. */

html, body { margin: 0; }
body { background: var(--WHITE1); }

/* Let the home headline run on one line on desktop (components.css caps it at 14ch, which split "Creative Director"). */
.lv-opening .lv-headline { max-width: none; }
/* Without the sub line under it, give the bio name the sub line's spacing. */
.lv-bio .lv-heading { margin-bottom: var(--space-5); }

/* Small-screen menu: "Menu" opens a plain white sheet listing the four destinations in heading size.
   Built on <details>, so it works without JavaScript. */
.lv-sheet { display: none; }
.lv-sheet > summary { list-style: none; position: relative; z-index: 11; }
.lv-sheet > summary::-webkit-details-marker { display: none; }
.lv-sheet__close { display: none; }
.lv-sheet[open] .lv-sheet__open { display: none; }
.lv-sheet[open] .lv-sheet__close { display: inline; }
.lv-sheet__nav { position: fixed; inset: 0; z-index: 10; background: var(--WHITE1); padding: var(--space-8) var(--space-4) var(--space-6); overflow-y: auto; }
.lv-sheet__nav ul { list-style: none; margin: 0; padding: 0; }
.lv-sheet__nav li + li { margin-top: var(--space-4); }
.lv-sheet__nav a { font-family: var(--font-serif); font-size: 30px; line-height: 1.15; color: var(--BLUE1); text-decoration: none; }
.lv-sheet__nav a[aria-current="page"] { color: var(--BROWN1); }

@media (max-width: 760px) {
  .lv-sheet { display: block; }
  .lv-social { flex-wrap: wrap; }
}

/* Filmography entries: a small poster beside the title block, then the full crew credits in small type. */
.lv-film { display: grid; grid-template-columns: 112px 1fr; gap: var(--space-4); align-items: start; }
.lv-film__poster { margin: 0; border-radius: var(--radius-photo); overflow: hidden; aspect-ratio: 2 / 3; background: var(--PAPER); }
.lv-film__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-crew { list-style: none; margin: var(--space-3) 0 0; padding: 0; font-size: 14px; line-height: 1.6; color: var(--INK-MUTED); }
.lv-films .lv-crew li { padding: 0; }
.lv-crew a { color: inherit !important; }
.lv-crew a:hover { color: var(--BROWN1) !important; }
@media (max-width: 760px) {
  .lv-film { grid-template-columns: 88px 1fr; gap: var(--space-3); }
}