:root {
  --pearl: #EEEEF0;
  --umber: #353029;
  --cyan: #0D7C7C;
  --peach: #E2AF9B;
  --paper: #FCFAF4;
  --body: "Duru Sans", sans-serif;
  --display: "Hammersmith One", sans-serif;
}
* { box-sizing: border-box; }
html { color: var(--umber); background: var(--pearl); scroll-behavior: smooth; }
body { margin: 0; font: 400 19px/1.8 var(--body); overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; background: var(--paper); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; }
p + p { margin-top: 1.15em; }
::selection { background: var(--peach); color: var(--umber); }
[data-lucide], .lucide { display: inline-block; width: 24px; height: 24px; flex: 0 0 24px; vertical-align: middle; }
.vrc-jump {
  position: absolute; left: 1rem; top: -12rem; z-index: 10; padding: .6rem 1rem;
  color: var(--umber); background: var(--paper); font-size: 17px;
}
.vrc-jump:focus { top: 1rem; }
.vrc-jump--reading:focus { top: 4.7rem; }
/* The choir is the cover. Only the upper-right quarter receives a feather. */
.vrc-cover { position: relative; height: 88svh; background: var(--paper); isolation: isolate; }
.vrc-cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; z-index: -2; }
.vrc-cover::before {
  content: ""; position: absolute; top: 0; right: 0; width: 49%; height: 50%; z-index: -1;
  background: radial-gradient(ellipse at 70% 8%, rgba(247,225,213,.99) 0%, rgba(247,225,213,.97) 54%, rgba(247,225,213,.92) 78%, rgba(247,225,213,.24) 94%, rgba(247,225,213,0) 100%);
  mask-image: linear-gradient(to right, transparent, #000 8%), linear-gradient(to bottom, #000 88%, transparent);
  mask-composite: intersect;
}
.vrc-cover-copy { position: absolute; right: 4%; top: 3.5%; width: 39%; max-width: 600px; }
.vrc-cover-identification { max-width: 52ch; font-size: 16px; line-height: 1.45; margin-bottom: 16px; }
.vrc-cover h1 { font-size: clamp(2.6rem, 4vw, 4rem); line-height: .99; letter-spacing: -.025em; text-wrap: balance; }
.vrc-cover-manner { display: block; margin-top: .22em; font-size: .67em; line-height: 1.08; letter-spacing: -.01em; }
/* The publication name arrives after the photograph, like a second title. */
.vrc-mast { background: var(--pearl); padding: 36px 4.5% 56px; border-bottom: 7px solid var(--cyan); }
.vrc-name { display: block; width: 100%; text-align: center; font: 400 clamp(2rem, 6.85vw, 7rem)/1.08 var(--display); letter-spacing: -.035em; text-decoration: none; }
.vrc-name:hover { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 3px; text-underline-offset: .12em; }
.vrc-nav { width: 370px; max-width: 100%; margin: 35px auto 0; }
.vrc-nav ul { padding: 0; margin: 0; list-style: none; }
.vrc-nav li { border-top: 1px solid #b6b8b6; }
.vrc-nav li:last-child { border-bottom: 1px solid #b6b8b6; }
.vrc-nav a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 8px; min-height: 63px; font: 400 39px/1.2 var(--display); text-decoration: none; transition: padding 180ms ease, background-color 180ms ease; }
.vrc-nav a:hover, .vrc-nav a:focus-visible { background: var(--paper); padding-left: 20px; padding-right: 14px; }
.vrc-nav .lucide, .vrc-nav [data-lucide] { color: var(--cyan); width: 28px; height: 28px; flex-basis: 28px; }
.vrc-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 3px; }
.vrc-prelude { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; padding: 105px max(6vw, calc((100vw - 1260px)/2)) 115px; background: var(--paper); }
.vrc-prelude h2 { max-width: 12ch; font-size: clamp(2.7rem, 4.6vw, 4.9rem); letter-spacing: -.025em; }
.vrc-prelude-copy { max-width: 58ch; padding-top: 6px; }
.vrc-prelude-copy p:first-child::first-letter { float: left; margin: .04em .13em -.05em 0; font: 400 4.7em/.82 var(--display); color: var(--cyan); }
/* A single reading column, with evidence occupying the open outer margin. */
.vrc-wall { background: linear-gradient(90deg, var(--peach) 0% 23%, var(--paper) 23% 77%, var(--peach) 77% 100%); }
.vrc-entry { display: grid; grid-template-columns: 23% 54% 23%; position: relative; }
.vrc-entry-number { position: absolute; left: calc(23% - 73px); top: 54px; z-index: 1; color: var(--cyan); font: 400 clamp(5rem, 8.4vw, 8.8rem)/1 var(--display); letter-spacing: -.075em; }
.vrc-entry-copy { grid-column: 2; padding: 83px 5.6vw 86px; border-top: 1px solid #d4d0c7; }
.vrc-entry h2 { position: relative; font-size: clamp(3.2rem, 5.1vw, 5.2rem); letter-spacing: -.025em; padding-bottom: .15em; border-bottom: 5px solid var(--cyan); margin-bottom: .52em; }
.vrc-qualification { position: relative; align-self: center; padding: 60px 3vw; font: 400 clamp(1.3rem, 1.9vw, 1.85rem)/1.36 var(--display); }
.vrc-qualification > .lucide, .vrc-qualification > [data-lucide] { display: block; margin-bottom: 17px; width: 33px; height: 33px; }
.vrc-qualification::before { content: ""; position: absolute; top: 42px; width: 8.5vw; border-top: 1px solid var(--umber); }
.vrc-entry:nth-child(odd) .vrc-qualification { grid-column: 3; grid-row: 1; transform: translateY(32px); }
.vrc-entry:nth-child(odd) .vrc-qualification::before { right: calc(100% - 25px); }
.vrc-entry:nth-child(even) .vrc-qualification { grid-column: 1; grid-row: 1; transform: translateY(72px); }
.vrc-entry:nth-child(even) .vrc-qualification::before { left: calc(100% - 25px); }
.vrc-read-on { display: inline-flex; gap: 14px; align-items: center; padding: 9px 0; margin-top: 25px; line-height: 1.5; font-size: 17px; text-decoration-thickness: 2px; }
.vrc-read-on .lucide { transition: transform 180ms ease; }
.vrc-read-on:hover .lucide, .vrc-read-on:focus-visible .lucide { transform: translateX(5px); }
.vrc-lastword { background: var(--pearl); padding: 112px max(6vw, calc((100vw - 870px)/2)) 122px; }
.vrc-lastword h2 { position: relative; font-size: clamp(2.7rem, 4.3vw, 4.5rem); letter-spacing: -.025em; max-width: 21ch; margin-left: -7vw; margin-bottom: 35px; }
.vrc-lastword h2::before { content: ""; display: block; width: 108px; border-top: 6px solid var(--cyan); margin-bottom: 26px; }
.vrc-footer { padding: 44px 5vw 32px; border-top: 1px solid #b6b8b6; background: var(--pearl); }
.vrc-footer-upper { display: flex; align-items: start; gap: 28px; justify-content: space-between; }
.vrc-footer-upper p { max-width: 58ch; font-size: 17px; }
.vrc-menu-mark { width: 130px; flex: 0 0 130px; }
.vrc-footer-links { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 28px; font-size: 17px; }
.vrc-copyright { font-size: 16px; margin-top: 18px; }
.vrc-inner { background: var(--paper); }
.vrc-inner .vrc-mast { padding-top: 25px; padding-bottom: 30px; border-bottom-width: 4px; }
.vrc-inner .vrc-name { font-size: clamp(2rem, 4.6vw, 4.4rem); }
.vrc-inner .vrc-nav { margin-top: 20px; width: 290px; }
.vrc-inner .vrc-nav a { font-size: 27px; min-height: 44px; padding-top: 5px; padding-bottom: 5px; }
.vrc-inner .vrc-nav .lucide, .vrc-inner .vrc-nav [data-lucide] { width: 22px; height: 22px; flex-basis: 22px; }
.vrc-breadcrumb { max-width: 1160px; margin: 0 auto; padding: 30px 55px 0; font-size: 16px; }
.vrc-breadcrumb ol { display: flex; align-items: baseline; gap: 14px; padding: 0; margin: 0; list-style: none; }
.vrc-breadcrumb a { display: inline-flex; gap: 10px; align-items: center; }
.vrc-breadcrumb .lucide, .vrc-breadcrumb [data-lucide] { width: 19px; height: 19px; flex-basis: 19px; }
.vrc-breadcrumb li + li::before { content: "/"; margin-right: 14px; color: var(--cyan); }
.vrc-paper { max-width: 1160px; padding: 48px 55px 95px; margin: 0 auto; }
.vrc-paper-heading { padding-bottom: 42px; border-bottom: 1px solid var(--umber); margin-bottom: 65px; }
.vrc-paper-heading h1 { font-size: clamp(3rem, 5vw, 5.2rem); max-width: 20ch; letter-spacing: -.03em; text-wrap: balance; }
.vrc-deck { font-size: 20px; line-height: 1.65; max-width: 56ch; margin-top: 30px; padding-left: 25px; border-left: 5px solid var(--cyan); }
.vrc-section { margin-top: 66px; }
.vrc-section h2 { max-width: 26ch; font-size: clamp(2.1rem, 3.3vw, 3.2rem); letter-spacing: -.015em; margin-bottom: 27px; }
.vrc-paragraphs { max-width: 64ch; }
.vrc-section--gloss { display: grid; grid-template-columns: minmax(0, 2.8fr) minmax(0, 1fr); column-gap: 55px; }
.vrc-section--gloss > h2, .vrc-section--gloss > .vrc-paragraphs { grid-column: 1; }
.vrc-side-reading { grid-column: 2; grid-row: 1 / span 2; align-self: start; font: 400 24px/1.45 var(--display); background: var(--peach); padding: 30px 25px 38px; margin-top: 22px; position: relative; transform: translateX(25px); }
.vrc-side-reading > .lucide, .vrc-side-reading > [data-lucide] { display: block; margin-bottom: 16px; }
.vrc-side-reading::before { content: ""; width: 90px; border-top: 1px solid var(--umber); position: absolute; left: -70px; top: 17px; }
/* Photographs open their named section. The caption projects beyond the edge. */
.vrc-photo-band { position: relative; margin-top: 34px; margin-bottom: 48px; width: calc(100% + 100px); margin-left: -50px; grid-column: 1 / -1; display: flow-root; }
.vrc-photo-band img { width: 100%; height: clamp(270px, 33vw, 460px); object-fit: cover; object-position: 50% 25%; background: var(--pearl); clip-path: polygon(0 0, 100% 0, 100% 91%, 97% 91%, 97% 100%, 0 100%); }
.vrc-photo-band figcaption { position: relative; font-size: 16px; line-height: 1.65; padding: 21px 26px; width: min(68%, 640px); margin: -25px 0 0 auto; background: var(--paper); border-left: 4px solid var(--cyan); box-shadow: 0 12px 26px rgba(53,48,41,.07); }
.vrc-date-line { font-size: 16px; padding-top: 35px; margin-top: 65px; border-top: 3px solid var(--cyan); }
.vrc-missing { padding: 85px 5vw 110px; max-width: 900px; margin: 0 auto; }
.vrc-missing h1 { font-size: clamp(2.7rem, 6vw, 4.8rem); margin-bottom: 30px; letter-spacing: -.025em; }
.vrc-missing p { margin-bottom: 22px; }
@media (min-width: 1700px) {
  .vrc-entry-copy { padding-left: max(85px, calc((54vw - 700px)/2)); padding-right: max(85px, calc((54vw - 700px)/2)); }
}
@media (max-width: 1100px) and (min-width: 621px) {
  .vrc-cover-copy { width: 42%; right: 3%; }
  .vrc-cover h1 { font-size: clamp(35px, 4.3vw, 47px); }
  .vrc-entry-copy { padding: 75px 34px 68px; }
  .vrc-entry-number { left: calc(23% - 48px); font-size: 85px; }
  .vrc-qualification { font-size: 22px; padding-left: 25px; padding-right: 25px; }
  .vrc-lastword h2 { margin-left: 0; }
  .vrc-photo-band { width: calc(100% + 60px); margin-left: -30px; }
  .vrc-photo-band figcaption { margin-right: 0; }
  .vrc-section--gloss { column-gap: 35px; }
  .vrc-side-reading { padding-left: 20px; padding-right: 20px; transform: none; font-size: 22px; }
}
@media (max-width: 620px) {
  body { font-size: 18px; line-height: 1.8; }
  .vrc-cover { height: 76svh; }
  .vrc-cover-photo { object-position: 24% 0%; }
  .vrc-cover::before { width: 78%; height: 32%; background: radial-gradient(ellipse at 30% 0%, rgba(247,225,213,.99) 0%, rgba(247,225,213,.97) 85%, rgba(247,225,213,.92) 96%, rgba(247,225,213,0) 100%); mask-image: linear-gradient(to right, transparent, #000 4%), linear-gradient(to bottom, #000 96%, transparent); }
  .vrc-cover-copy { top: 15px; right: 18px; width: calc(100% - 116px); max-width: 470px; }
  .vrc-cover-identification { font-size: 16px; line-height: 1.25; max-width: none; margin-bottom: 9px; }
  .vrc-cover h1 { font-size: clamp(25px, 7.2vw, 34px); line-height: 1.02; letter-spacing: -.025em; text-wrap: pretty; }
  .vrc-cover-manner { font-size: .85em; margin-top: .16em; }
  .vrc-mast { padding: 25px 20px 30px; border-bottom-width: 5px; }
  .vrc-name { font-size: clamp(22px, 6.8vw, 40px); letter-spacing: -.035em; white-space: nowrap; }
  .vrc-nav, .vrc-inner .vrc-nav { width: 100%; margin-top: 24px; }
  .vrc-nav ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 21px; }
  .vrc-nav li:last-child { border-bottom: 0; }
  .vrc-nav a, .vrc-inner .vrc-nav a { min-height: 50px; font-size: 24px; padding: 7px 0; gap: 7px; }
  .vrc-nav .lucide, .vrc-nav [data-lucide], .vrc-inner .vrc-nav .lucide, .vrc-inner .vrc-nav [data-lucide] { width: 20px; height: 20px; flex-basis: 20px; }
  .vrc-nav a:hover, .vrc-nav a:focus-visible { padding-left: 6px; padding-right: 3px; }
  .vrc-prelude { display: block; padding: 62px 25px 68px; }
  .vrc-prelude h2 { font-size: 42px; max-width: 15ch; margin-bottom: 32px; }
  .vrc-prelude-copy { padding: 0; }
  .vrc-prelude-copy p:first-child::first-letter { font-size: 4em; }
  .vrc-wall { background: var(--paper); }
  .vrc-entry { display: flex; flex-direction: column; }
  .vrc-entry-number { left: 22px; top: 30px; font-size: 74px; }
  .vrc-entry-copy { padding: 53px 25px 39px; }
  .vrc-entry h2 { margin-left: 65px; min-height: 54px; padding-bottom: .19em; font-size: 43px; margin-bottom: 31px; }
  .vrc-qualification { width: calc(100% - 25px); background: var(--peach); padding: 29px 28px 32px; font-size: 25px; }
  .vrc-entry:nth-child(odd) .vrc-qualification { align-self: flex-end; transform: none; }
  .vrc-entry:nth-child(even) .vrc-qualification { align-self: flex-start; transform: none; }
  .vrc-qualification > .lucide, .vrc-qualification > [data-lucide] { width: 28px; height: 28px; margin-bottom: 13px; }
  .vrc-entry .vrc-qualification::before { width: 42px; top: 17px; left: -15px; right: auto; }
  .vrc-entry:nth-child(even) .vrc-qualification::before { left: auto; right: -15px; }
  .vrc-read-on { font-size: 17px; margin-top: 23px; }
  .vrc-lastword { padding: 68px 25px 76px; }
  .vrc-lastword h2 { font-size: 40px; margin-left: 0; }
  .vrc-lastword h2::before { width: 75px; border-top-width: 5px; }
  .vrc-footer { padding: 34px 25px; }
  .vrc-footer-upper { gap: 16px; }
  .vrc-menu-mark { flex: 0 0 62px; width: 62px; margin-top: 6px; }
  .vrc-footer-upper p, .vrc-footer-links, .vrc-copyright { font-size: 16px; }
  .vrc-footer-links { gap: 22px; }
  .vrc-inner .vrc-mast { padding: 24px 20px 25px; }
  .vrc-inner .vrc-name { font-size: clamp(22px, 6.8vw, 40px); }
  .vrc-breadcrumb { padding: 26px 25px 0; }
  .vrc-breadcrumb ol { gap: 10px; }
  .vrc-breadcrumb li + li::before { margin-right: 10px; }
  .vrc-paper { padding: 38px 25px 65px; }
  .vrc-paper-heading { padding-bottom: 32px; margin-bottom: 46px; }
  .vrc-paper-heading h1 { font-size: 44px; max-width: 16ch; }
  .vrc-deck { font-size: 19px; padding-left: 18px; margin-top: 25px; }
  .vrc-section { margin-top: 48px; }
  .vrc-section h2 { font-size: 34px; margin-bottom: 25px; }
  .vrc-section--gloss { display: block; }
  .vrc-side-reading { font-size: 24px; margin: 30px -12px 0 15px; padding: 28px; transform: none; }
  .vrc-side-reading::before { width: 45px; left: -23px; top: 15px; }
  .vrc-photo-band { width: calc(100% + 50px); margin: 28px 0 37px -25px; }
  .vrc-photo-band img { height: 245px; clip-path: polygon(0 0, 100% 0, 100% 92%, 95% 92%, 95% 100%, 0 100%); }
  .vrc-photo-band figcaption { width: calc(100% - 45px); padding: 17px 20px; margin: -20px 12px 0 auto; font-size: 16px; box-shadow: 0 9px 22px rgba(53,48,41,.05); }
  .vrc-date-line { padding-top: 26px; margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
