@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..600&display=swap");
/* Louis Venezia — a literary site. Plain white pages, blue and brown as inks, no ornament.
   Plain CSS, prefix lv-. No boxes, no capitals, no pills. */

.lv, .lv * { box-sizing: border-box; }
.lv { background: var(--WHITE1); color: var(--INK); font-family: var(--font-trebuchet-ms); font-size: 18px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
.lv a { color: var(--BLUE1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); transition: color .2s, text-decoration-color .2s; }
.lv a:hover { color: var(--BROWN1); text-decoration-color: currentColor; }
.lv :focus-visible { outline: 2px solid var(--BLUE1); outline-offset: 4px; }
.lv-page { max-width: var(--page); margin: 0 auto; padding: 0 var(--space-6); position: relative; }
.lv-section { padding: var(--space-8) 0 0; }
.lv-paper { background: var(--PAPER); }
.lv-serif { font-family: var(--font-serif); }

/* Type */
.lv-name { font-family: var(--font-serif); font-size: 20px; line-height: 1.2; font-weight: 500; color: var(--INK); margin: 0; }
.lv-headline { font-family: var(--font-serif); font-size: 60px; line-height: 1.1; font-weight: 400; letter-spacing: -.01em; color: var(--BLUE1); margin: 0; font-optical-sizing: auto; }
.lv-heading { font-family: var(--font-serif); font-size: 38px; line-height: 1.15; font-weight: 400; letter-spacing: -.005em; color: var(--BLUE1); margin: 0; }
.lv-entry-title { font-family: var(--font-serif); font-size: 26px; line-height: 1.25; font-weight: 500; color: var(--INK); margin: 0; }
.lv-italic { font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.5; }
.lv-muted { color: var(--INK-MUTED); }
.lv-brown { color: var(--BROWN1); }
.lv-body { max-width: var(--measure); }
.lv-body p { margin: 0 0 var(--space-3); }
.lv-intro { font-family: var(--font-serif); font-size: 22px; line-height: 1.55; max-width: var(--measure); color: var(--INK); margin: var(--space-3) 0 0; }

/* Drop cap — the first letter of a page's first paragraph, in brown serif */
.lv-dropcap::first-letter { font-family: var(--font-serif); float: left; font-size: 88px; line-height: .82; font-weight: 400; color: var(--BROWN1); padding: 8px 12px 0 0; }

/* Text link with a quiet arrow — replaces buttons everywhere */
.lv-more { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--BROWN1) !important; text-decoration: none !important; display: inline-flex; gap: 8px; align-items: baseline; border-bottom: 1px solid color-mix(in oklab, var(--BROWN1) 35%, transparent); padding-bottom: 2px; transition: border-color .2s, gap .2s; }
.lv-more::after { content: "\2192"; font-style: normal; }
.lv-more:hover { border-bottom-color: var(--BROWN1); gap: 12px; }

/* Masthead — name left, four destinations right. Nothing else. */
.lv-masthead { padding: 36px 0 0; }
.lv-masthead .lv-page { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); }
.lv-masthead .lv-name a { color: var(--INK); text-decoration: none; }
.lv-nav { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.lv-nav a { color: var(--INK) !important; text-decoration: none !important; position: relative; }
.lv-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--BROWN1); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.lv-nav a:hover::after, .lv-nav a[aria-current="page"]::after { transform: scaleX(1); }
.lv-nav a[aria-current="page"] { color: var(--BROWN1) !important; }
.lv-menu { display: none; background: none; border: 0; font: italic 18px var(--font-serif); color: var(--INK); cursor: pointer; padding: 0; }

/* Photo — crisp, barely rounded, with an optional serif italic caption. No ornament. */
.lv-wash-photo { margin: 0; }
.lv-wash-photo__img { aspect-ratio: var(--ratio, 3 / 2); border-radius: var(--radius-photo); overflow: hidden; background: var(--PAPER); }
.lv-wash-photo__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-wash-photo figcaption { margin-top: 14px; font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--INK-MUTED); }
.lv-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font: italic 15px var(--font-serif); color: var(--BLUE1); opacity: .7; }

/* Opening — the home page's first screen */
.lv-opening { padding: var(--space-8) 0 0; }
.lv-opening .lv-name { margin-bottom: var(--space-3); color: var(--BROWN1); font-style: italic; font-weight: 400; }
.lv-opening .lv-headline { max-width: 14ch; }
.lv-opening .lv-wash-photo { margin-top: var(--space-6); }

/* Bio — two columns like a spread: portrait left, text right */
.lv-bio { display: grid; grid-template-columns: 4fr 7fr; gap: var(--space-6); align-items: start; }
.lv-bio .lv-heading { margin-bottom: var(--space-2); }
.lv-bio .lv-sub { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--BROWN1); margin: 0 0 var(--space-5); }
.lv-social { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; gap: 22px; font-family: var(--font-serif); font-style: italic; font-size: 17px; }
.lv-social li + li::before { content: "\00b7"; color: var(--INK-MUTED); margin-right: 22px; font-style: normal; }
.lv-social a { color: var(--INK) !important; }

/* Contents — Always Be Writing as a table of contents */
.lv-contents { list-style: none; margin: var(--space-6) 0 0; padding: 0; max-width: 820px; }
.lv-contents li { padding: var(--space-5) 0; border-top: 1px solid var(--RULE); }
.lv-contents li:last-child { border-bottom: 1px solid var(--RULE); }
.lv-contents a.lv-contents__link { display: block; text-decoration: none !important; color: inherit !important; }
.lv-contents a.lv-contents__link:hover .lv-entry-title { color: var(--BLUE1); }
.lv-contents .lv-italic { display: block; margin-top: var(--space-2); }
.lv-contents__outlet { color: var(--BROWN1); }
.lv-contents__outlet::after { content: "  \2192"; font-style: normal; }

/* Pull quote — a line of the site's own copy, brown italic, hung in the margin */
.lv-pull { margin: 0; padding: var(--space-6) 0; max-width: 820px; }
.lv-pull blockquote { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 34px; line-height: 1.3; color: var(--BROWN1); text-indent: -.42em; }
.lv-pull figcaption { margin-top: var(--space-3); font-family: var(--font-serif); font-size: 17px; color: var(--INK-MUTED); }

/* Venture — a heading, one paragraph, a link, and a photo */
.lv-venture { display: grid; grid-template-columns: 6fr 5fr; gap: var(--space-6); align-items: center; }
.lv-venture--flip > :first-child { order: 2; }
.lv-venture .lv-body { margin-top: var(--space-3); }

/* Filmography — two columns of credits, like the back of a book */
.lv-films { list-style: none; margin: var(--space-6) 0 0; padding: 0; columns: 2; column-gap: var(--space-6); }
.lv-films li { break-inside: avoid; padding: 0 0 var(--space-5); }
.lv-films .lv-entry-title { font-style: italic; font-weight: 400; font-size: 28px; }
.lv-films .lv-meta { font-size: 15px; color: var(--INK-MUTED); margin-top: 2px; }
.lv-films .lv-credit { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--BROWN1); margin-top: 2px; }

/* Footer */
.lv-footer { margin-top: var(--space-8); padding: var(--space-6) 0; border-top: 1px solid var(--RULE); }
.lv-footer .lv-page { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-4); }
.lv-footer .lv-social { margin: 0; font-size: 16px; }
.lv-footer small { font-size: 14px; color: var(--INK-MUTED); }

@media (max-width: 760px) {
  .lv-page { padding: 0 var(--space-4); }
  .lv-section { padding-top: var(--space-7); }
  .lv-headline { font-size: 40px; }
  .lv-heading { font-size: 30px; }
  .lv-pull blockquote { font-size: 26px; }
  .lv-nav { display: none; }
  .lv-menu { display: block; }
  .lv-bio, .lv-venture { grid-template-columns: 1fr; gap: var(--space-5); }
  .lv-venture--flip > :first-child { order: 0; }
  .lv-films { columns: 1; }
}
@media (prefers-reduced-motion: reduce) { .lv * { transition: none !important; } }