/* Vina Vo — site stylesheet. Tokens come from the Vina Vo design system (tokens.json). */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600&family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..700,0..100;1,9..144,300..700,0..100&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&display=swap");

:root {
  --linen: #f6f0e3;
  --paper: #fcf9f2;
  --canopy: #ebe1cd;
  --line: #d9cbb1;
  --line-strong: #8f7c63;
  --ink: #2d2318;
  --ink-soft: #665443;
  --teak: #7a4f2e;
  --terracotta: #a3462a;
  --on-terracotta: var(--paper);
  --terracotta-clay: #c8714b;
  --terracotta-soft: #f4dccb;
  --celadon: #a8c4ae;
  --celadon-soft: #dfe9df;
  --celadon-ink: #3a6553;
  --fern: #3f5e34;
  --lantern: #e3a23a;
  --lantern-soft: #f9e6bf;
  --focus: var(--celadon-ink);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 112px;
  --radius-sm: 3px;
  --radius-md: 10px;
  --radius-arch: 160px;
  --radius-pill: 999px;
  --shadow-dapple: 0 1px 0 rgba(45,35,24,0.06), 0 18px 36px -24px rgba(45,35,24,0.35);
  --measure-essay: 64ch;
  --measure-wide: 1120px;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--linen); color: var(--ink); font-family: var(--font-serif); font-size: 18px; line-height: 1.6; font-optical-sizing: auto; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; }
p { margin: 0 0 1em; }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 14px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 14px; z-index: 10; }
.skip:focus { left: 16px; }
.wrap { max-width: var(--measure-wide); margin: 0 auto; padding: 0 var(--space-6); }
@media (max-width: 720px) { .wrap { padding: 0 var(--space-4); } }
.section { margin: var(--space-7) 0; }
.kicker { display: block; color: var(--ink-soft); margin-bottom: var(--space-3); }
.h-display { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: clamp(38px, 5.4vw, 52px); line-height: 1.04; letter-spacing: -.015em; font-weight: 400; }
.h-heading { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: clamp(27px, 3.4vw, 32px); line-height: 1.15; letter-spacing: -.01em; font-weight: 420; }
.lede { font-size: 20px; line-height: 1.6; max-width: 34em; }
.muted { color: var(--ink-soft); }
.meta { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; color: var(--ink-soft); }



::selection { background: var(--lantern-soft); color: var(--ink); }
:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Fraunces always soft — rounded terminals, never sharp. */
.vv-display, .vv-mast__name, .vv-index__title, .vv-notice__title, .vv-quote, .vv-letters__title, .vv-poem__title {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
.vv-label { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

/* ---------- Link ---------- */
.vv-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--teak); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .3s ease, text-decoration-color .3s ease; }
.vv-link:hover { color: var(--terracotta); text-decoration-color: var(--terracotta); }

/* ---------- Button ---------- */
.vv-btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 15px; line-height: 1.45; font-weight: 500;
  padding: 11px 22px; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; }
.vv-btn--primary { background: var(--terracotta); color: var(--on-terracotta); }
.vv-btn--primary:hover { background: var(--ink); }
.vv-btn--secondary { background: transparent; color: var(--teak); border-color: var(--line-strong); }
.vv-btn--secondary:hover { border-color: var(--teak); color: var(--ink); background: var(--paper); }
.vv-btn--quiet { padding: 11px 2px; background: none; color: var(--ink); border-radius: var(--radius-sm); }
.vv-btn--quiet .vv-btn__arrow { transition: transform .4s ease; }
.vv-btn--quiet:hover { color: var(--terracotta); }
.vv-btn--quiet:hover .vv-btn__arrow { transform: translateX(4px); }
.vv-btn[disabled], .vv-btn[aria-disabled="true"] { background: var(--canopy); color: var(--ink-soft); border-color: transparent; cursor: not-allowed; }

/* ---------- Chip ---------- */
.vv-chip { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); background: var(--canopy); }
.vv-chip--essay { background: var(--terracotta-soft); }
.vv-chip--poem { background: var(--lantern-soft); }
.vv-chip--gathering { background: var(--celadon-soft); }
.vv-chip__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--lantern); }

/* ---------- Masthead ---------- */
.vv-mast { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4) var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.vv-mast__id { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.vv-mast__name { font-size: 30px; line-height: 1; font-weight: 400; letter-spacing: -.01em; color: var(--ink); text-decoration: none; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72; }
.vv-mast__tag { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--ink-soft); }
.vv-mast__nav { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; font-family: var(--font-sans); font-size: 15px; font-weight: 500; }
.vv-mast__nav a { position: relative; color: var(--ink); text-decoration: none; padding: 2px 0; }
.vv-mast__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--teak); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.vv-mast__nav a:hover::after { transform: scaleX(1); }
.vv-mast__nav a[aria-current="page"] { background: linear-gradient(transparent 58%, var(--lantern-soft) 58%, var(--lantern-soft) 92%, transparent 92%); }

/* ---------- Essay index (a table of contents, not cards) ---------- */
.vv-index { list-style: none; margin: 0; padding: 0; }
.vv-index__row { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-5); padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.vv-index__row:last-child { border-bottom: 1px solid var(--line); }
.vv-index__year { font-family: var(--font-sans); font-size: 13px; color: var(--ink-soft); padding-top: 7px; font-variant-numeric: oldstyle-nums; }
.vv-index__title { margin: var(--space-2) 0 0; font-size: 24px; line-height: 1.25; font-weight: 450; }
.vv-index__title a { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--terracotta), var(--terracotta)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .5s ease, color .3s ease; }
.vv-index__title a:hover { color: var(--terracotta); background-size: 100% 1px; }
.vv-index__dek { margin: var(--space-1) 0 0; font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink-soft); }
.vv-index__meta { margin: var(--space-2) 0 0; font-family: var(--font-sans); font-size: 13px; color: var(--ink-soft); }
@media (max-width: 560px) { .vv-index__row { grid-template-columns: 1fr; gap: 0; } .vv-index__year { padding: 0; } }

/* ---------- Gathering notice (paper under an arch) ---------- */
.vv-notice { position: relative; background: var(--celadon-soft); padding: var(--space-6) var(--space-6) var(--space-5); border-top-left-radius: var(--radius-arch); border-top-right-radius: var(--radius-arch); border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); box-shadow: var(--shadow-dapple); max-width: 440px; }
.vv-notice__lantern { display: block; margin: 0 auto var(--space-3); width: 28px; height: auto; }
.vv-notice__kicker { display: flex; justify-content: center; gap: var(--space-2); color: var(--celadon-ink); text-align: center; }
.vv-notice__title { margin: var(--space-3) 0 var(--space-2); text-align: center; font-size: 28px; line-height: 1.15; font-weight: 420; }
.vv-notice__when { text-align: center; font-family: var(--font-sans); font-size: 14px; line-height: 1.45; color: var(--ink); margin: 0; }
.vv-notice__body { font-size: 17px; line-height: 1.6; margin: var(--space-4) 0 var(--space-5); }
.vv-notice__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px dashed var(--line-strong); }
.vv-notice__seats { font-family: var(--font-sans); font-size: 13px; color: var(--celadon-ink); font-weight: 500; }

/* ---------- Pull quote ---------- */
.vv-quote { position: relative; margin: var(--space-7) 0; padding-left: 56px; max-width: 30ch; font-size: 30px; line-height: 1.3; font-weight: 350; font-style: italic; color: var(--ink); }
.vv-quote__sprig { position: absolute; left: 4px; top: -6px; width: 32px; height: 64px; }
.vv-quote p { margin: 0; }
.vv-quote footer { margin-top: var(--space-3); font-family: var(--font-sans); font-style: normal; font-size: 13px; color: var(--ink-soft); }

/* ---------- Poem ---------- */
.vv-poem { max-width: var(--measure-essay); font-family: var(--font-serif); font-size: 19px; line-height: 1.75; color: var(--ink); }
.vv-poem__title { font-size: 24px; line-height: 1.25; font-weight: 450; margin: 0 0 var(--space-5); }
.vv-poem__stanza { margin: 0 0 1.75em; }
.vv-poem__line { display: block; padding-left: 2em; text-indent: -2em; }
.vv-poem__line--indent { padding-left: 4em; }
.vv-poem__mark { display: block; color: var(--fern); font-family: var(--font-display); margin: 0 0 1.25em 4em; }
.vv-poem i, .vv-poem em { font-style: italic; }

/* ---------- Letters sign-up ---------- */
.vv-letters { position: relative; background: var(--canopy); padding: var(--space-6); border-radius: var(--radius-md); display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-5) var(--space-6); align-items: end; }
/* the carrier pigeon perches on the band's top edge: its ledge line (85.8% down the SVG) sits on the edge */
.vv-letters__pigeon { position: absolute; right: var(--space-6); top: -63px; width: 88px; height: auto; pointer-events: none; }
.vv-letters__title { margin: 0 0 var(--space-2); font-size: 28px; line-height: 1.15; font-weight: 420; }
.vv-letters__blurb { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.vv-letters__form { display: flex; flex-direction: column; gap: var(--space-2); }
.vv-letters__lab { font-family: var(--font-sans); font-size: 13px; color: var(--ink); font-weight: 500; }
.vv-letters__row { display: flex; gap: var(--space-2); }
.vv-input { flex: 1; min-width: 0; font-family: var(--font-sans); font-size: 15px; padding: 11px var(--space-4); background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
.vv-input::placeholder { color: var(--ink-soft); }
.vv-letters__fine { font-family: var(--font-sans); font-size: 12px; color: var(--ink-soft); margin: 0; }
@media (max-width: 620px) { .vv-letters { grid-template-columns: 1fr; padding: var(--space-5); } .vv-letters__row { flex-direction: column; } }

/* ---------- Recognition (the residency-committee list) ---------- */
.vv-cv { max-width: 640px; }
.vv-cv__group { margin: 0 0 var(--space-5); }
.vv-cv__head { color: var(--ink-soft); margin: 0 0 var(--space-2); }
.vv-cv__list { list-style: none; margin: 0; padding: 0; }
.vv-cv__item { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-4); padding: 6px 0; font-size: 17px; line-height: 1.5; }
.vv-cv__yr { font-family: var(--font-sans); font-size: 13px; color: var(--ink-soft); padding-top: 3px; font-variant-numeric: oldstyle-nums; }
.vv-cv__org { color: var(--ink-soft); font-style: italic; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* =======================================================
   Page layouts
   ======================================================= */

/* margin-column layout: a narrow label column beside the content, like a journal */
.margin-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-5) var(--space-6); }
.margin-grid > .margin { padding-top: 6px; }
@media (max-width: 820px) { .margin-grid { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ---- Home: the opening ---- */
.opening { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6); align-items: end; padding: var(--space-8) 0 var(--space-7); }
.opening__line { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-size: clamp(44px, 6.4vw, 76px); line-height: .98; letter-spacing: -.02em; font-weight: 380; margin: 0 0 var(--space-5); }
.opening__line em { font-style: italic; font-weight: 340; }
.opening__sub { font-size: 20px; line-height: 1.55; color: var(--ink-soft); max-width: 30em; margin: 0 0 var(--space-5); }
.opening__actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }
.opening__art { align-self: stretch; display: flex; align-items: flex-end; }
.opening__art img { width: 100%; display: block; }
@media (max-width: 860px) { .opening { grid-template-columns: 1fr; padding: var(--space-7) 0 var(--space-6); } .opening__art { order: -1; max-width: 460px; } }

.quote-band { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); }
.quote-band .vv-quote { margin: 0 0 var(--space-3); }
@media (max-width: 820px) { .quote-band { grid-template-columns: 1fr; } }

/* two notices, staggered — never a row of identical cards */
.notices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.notices .vv-notice:nth-child(2) { margin-top: var(--space-8); }
.notices .vv-notice { max-width: none; }
@media (max-width: 900px) { .notices { grid-template-columns: 1fr; } .notices .vv-notice:nth-child(2) { margin-top: 0; } .notices .vv-notice { max-width: 480px; } }
@media (max-width: 520px) { .vv-notice { padding: var(--space-6) var(--space-5) var(--space-5); } }

.vv-letters { margin-top: calc(var(--space-7) + 40px); }

/* ---- Footer ---- */
.site-foot { background: var(--canopy); margin-top: var(--space-7); padding: var(--space-6) 0 var(--space-5); }
.site-foot__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5); align-items: flex-end; }
.site-foot__name { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 26px; line-height: 1; }
.site-foot__tag { font-style: italic; color: var(--ink-soft); font-size: 16px; margin: var(--space-2) 0 0; }
.site-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; font-family: var(--font-sans); font-size: 14px; }
.site-foot__links a { text-decoration: none; }
.site-foot__links a:hover { color: var(--terracotta); text-decoration: underline; text-underline-offset: .2em; }
.site-foot__fine { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }

/* ---- Masthead on small screens ---- */
@media (max-width: 640px) { .vv-mast__nav { gap: var(--space-4); font-size: 14px; } .vv-mast__name { font-size: 26px; } }

/* ---- Page head (index pages) ---- */
.page-head { padding: var(--space-7) 0 var(--space-6); max-width: 760px; }
.page-head .h-display { margin-bottom: var(--space-4); }

/* ---- Writing filter ---- */
.filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); }
.filter button { font-family: var(--font-sans); font-size: 14px; font-weight: 500; padding: 7px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; transition: background-color .3s ease, border-color .3s ease; }
.filter button:hover { background: var(--paper); }
.filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.vv-index__row[hidden] { display: none; }

.aside-book { background: var(--paper); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-dapple); }
.aside-book p:last-child { margin-bottom: 0; }

/* ---- Essay page ---- */
.essay-head { max-width: 820px; margin: 0 auto; padding: var(--space-7) 0 var(--space-6); text-align: center; }
.essay-head .vv-chip { margin-bottom: var(--space-4); }
.essay-head .h-display { margin-bottom: var(--space-4); }
.essay-head .vv-index__dek { font-size: 21px; }
.essay-head .meta { margin-top: var(--space-4); }
.paper { background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-dapple); padding: var(--space-7) var(--space-6); max-width: 860px; margin: 0 auto; }
.prose { max-width: var(--measure-essay); margin: 0 auto; font-size: 20px; line-height: 1.65; }
.prose p { margin: 0 0 1.15em; }
.prose > p:first-of-type::first-letter { font-family: var(--font-display); font-variation-settings: "SOFT" 100; float: left; font-size: 3.4em; line-height: .85; padding: .08em .1em 0 0; color: var(--terracotta); }
.prose .vv-quote { margin: var(--space-7) 0 var(--space-7) -24px; }
.divider { display: block; margin: var(--space-6) auto; width: 180px; }
.endnote { max-width: var(--measure-essay); margin: var(--space-6) auto 0; padding-top: var(--space-5); border-top: 1px solid var(--line); font-size: 17px; color: var(--ink-soft); font-style: italic; }
.pager { max-width: 860px; margin: var(--space-6) auto 0; display: flex; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.back { display: inline-block; margin-top: var(--space-6); font-family: var(--font-sans); font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.back:hover { color: var(--terracotta); }
@media (max-width: 640px) { .paper { padding: var(--space-6) var(--space-4); border-radius: 0; margin: 0 calc(-1 * var(--space-4)); } .prose { font-size: 19px; } .prose .vv-quote { margin-left: 0; font-size: 25px; } }

/* poem page */
.poem-page { max-width: 640px; margin: 0 auto; }
.poem-page .vv-poem__title { font-size: clamp(30px, 4vw, 40px); margin-bottom: var(--space-6); }

/* ---- Gatherings: how a morning goes ---- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline time { font-family: var(--font-sans); font-size: 13px; color: var(--celadon-ink); font-weight: 600; padding-top: 4px; }
.timeline strong { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 450; font-size: 21px; display: block; margin-bottom: 2px; }
.timeline p { margin: 0; color: var(--ink-soft); font-size: 17px; }
.host { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; background: var(--celadon-soft); border-radius: var(--radius-md); padding: var(--space-6); }
.host p { margin: var(--space-2) 0 0; max-width: 36em; }
@media (max-width: 700px) { .host { grid-template-columns: 1fr; padding: var(--space-5); } }

/* ---- About ---- */
.about { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--space-7); align-items: start; padding-top: var(--space-7); }
.portrait { position: relative; aspect-ratio: 4 / 5; border-top-left-radius: var(--radius-arch); border-top-right-radius: var(--radius-arch); border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); overflow: hidden; background: var(--celadon); }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait__empty { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--space-6); }
.portrait__empty img { width: 64px; height: auto; object-fit: contain; }
.portrait figcaption, .about figcaption { margin-top: var(--space-3); }
.about__body .lede { margin-bottom: var(--space-5); }
.about__body .h-heading { margin: var(--space-7) 0 var(--space-5); }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-6); } .portrait { max-width: 320px; } }

/* ---- Letters archive ---- */
.letters-list .vv-index__title { font-size: 21px; }

/* ---- 404 ---- */
.lost { text-align: center; padding: var(--space-8) 0 var(--space-7); max-width: 560px; margin: 0 auto; }
.lost img { width: 120px; margin-bottom: var(--space-5); }
.lost .h-display { margin-bottom: var(--space-4); }
.lost .opening__actions { justify-content: center; margin-top: var(--space-5); }

/* form success */
.vv-letters__done { display: none; font-size: 18px; margin: 0; }
.vv-letters.is-done .vv-letters__form > :not(.vv-letters__done) { display: none; }
.vv-letters.is-done .vv-letters__done { display: block; }

@media print { .vv-mast__nav, .site-foot, .vv-letters, .filter { display: none; } body { background: #fff; } .paper { box-shadow: none; } }

/* ---------- What the essay editor produces ----------
   Quote button  → a pull quote with the hanging fern sprig
   Divider (---) → the sprig divider
   Images        → rounded photographs with an italic caption (the image's title) */
.prose blockquote { position: relative; margin: var(--space-7) 0 var(--space-7) -24px; padding-left: 56px; max-width: 30ch; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 30px; line-height: 1.3; font-weight: 350; font-style: italic; color: var(--ink); }
.prose blockquote::before { content: ""; position: absolute; left: 4px; top: -6px; width: 32px; height: 64px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64'%3E%3Cpath d='M16 0c.5 18-1 36 1 60' fill='none' stroke='%233f5e34' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M16 14c-7-2-11 1-13 7 6 1.5 11-1 13-7Z' fill='%233f5e34'/%3E%3Cpath d='M16.4 26c7-2 11.5 1 13.4 6.6-6.2 1.6-11-1-13.4-6.6Z' fill='%233f5e34'/%3E%3Cpath d='M16.6 40c-6.4-1-10.4 1.8-12 7.2 5.6 1 10-1.6 12-7.2Z' fill='%233f5e34'/%3E%3C/svg%3E") no-repeat center / contain; }
.prose blockquote p { margin: 0; }
.prose hr { border: 0; height: 40px; margin: var(--space-6) auto; width: 180px; background: url("/assets/img/sprig-divider.svg") no-repeat center / contain; }
.prose img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--space-6) 0 var(--space-2); }
.prose a { color: var(--ink); text-decoration-color: var(--teak); text-underline-offset: .22em; }
.prose a:hover { color: var(--terracotta); }
.prose h2, .prose h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 420; font-size: 26px; line-height: 1.2; margin: var(--space-6) 0 var(--space-3); }
.about__body p { max-width: 38em; }
@media (max-width: 640px) { .prose blockquote { margin-left: 0; font-size: 25px; } }

/* ---------- Pigeon badge beside the name in the header ---------- */
.vv-mast, .vv-mast__id { align-items: center; }
.vv-mast__name { display: inline-flex; align-items: center; gap: 12px; }
.vv-mast__badge { width: 40px; height: 40px; flex: none; display: block; }
@media (max-width: 640px) { .vv-mast__badge { width: 34px; height: 34px; } .vv-mast__name { gap: 10px; } }