@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/cormorant-garamond.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

* { box-sizing: border-box; }
html { background: #c5c5c4; }
body { margin: 0; color: #080808; font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif; }
.portrait-page { position: relative; width: 100%; height: 66.666667vw; min-height: 100svh; overflow: hidden; }
.scenery, .scenery img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scenery img { object-fit: cover; object-position: center; }
/* Keep the supplied portrait pixels. Only the scenery beneath the old lettering is reconstructed. */
.original-portrait { mask-image: linear-gradient(to right, #000 57%, transparent 61%); }
.phone-portrait { display: none; }
.biography { position: absolute; top: 16%; left: 62.7%; width: 32%; font-size: 1.64vw; font-weight: 400; line-height: 1.25; }
h1 { margin: 0; font-size: 4.9vw; font-weight: 400; line-height: 1.1; letter-spacing: -.018em; white-space: nowrap; }
.tagline { margin: 1vw 0 0; font-size: 1.8vw; font-style: italic; line-height: 1.1; }
.rule { width: 6vw; height: 1px; background: #373737; margin: 1.3vw 0 1.3vw; }
p { margin: 0 0 2.12vw; }
p:last-child { margin-bottom: 0; }
.contact-links { position: absolute; left: 62.7%; bottom: 3%; font-size: 20px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; flex-direction: column; }
.contact-links small { font-size: 14px; line-height: 1.35; }
.contact-links a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.contact-links a:hover { color: #444; }
.contact-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 7px; }
::selection { background: #333; color: #fff; }

.correspondence-card { position: relative; z-index: 1; padding: 64px 24px 30px; text-align: center; color: #282824; background: #f0f0eb; font-family: Arial, Helvetica, sans-serif; }
.correspondence-card h2 { margin: 0; font-size: clamp(30px, 4vw, 35px); line-height: 1.2; font-weight: 400; letter-spacing: -.03em; }
.correspondence-rule { width: 58px; height: 1px; background: #a9a9a1; margin: 24px auto 26px; }
.correspondence-note { color: #66665f; font-size: 22px; line-height: 1.3; font-style: italic; margin: 0 0 28px; }
.correspondence-email { color: inherit; font-size: clamp(17px, 4.3vw, 21px); line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.correspondence-email:hover { text-decoration: underline; text-underline-offset: 4px; }
.correspondence-email:focus-visible { outline: 2px solid currentColor; outline-offset: 7px; }
.correspondence-card .contact-links { position: static; margin: 44px auto 0; padding: 0; align-items: center; max-width: none; font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif; color: #282824; }
.correspondence-card .contact-links small { font-size: 14px; color: #55554f; }

@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  html { background: #151615; }
  .portrait-page { height: auto; min-height: 100svh; overflow: hidden; color: #f5f4ef; background: #151615; }
  .scenery { display: none; }
  /* The portrait scrolls away to reveal the lake behind the text. */
  .phone-portrait { display: block; position: absolute; inset: 0; margin: 0; overflow: hidden; }
  .phone-portrait img { display: block; position: absolute; left: 20%; transform: translateX(-20%); width: auto; min-width: 100%; height: 100%; object-fit: cover; }
  .phone-portrait .phone-landscape { position: fixed; top: 0; left: 100%; transform: translateX(-100%); height: 100svh; }
  .phone-hero { position: absolute; inset: 0 0 auto; height: 100svh; mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
  .phone-source { mask-image: linear-gradient(to right, #000 57%, transparent 61%); }
  .phone-portrait::after { content: ""; position: absolute; inset: 0 0 auto; height: 100svh; background: linear-gradient(to bottom, #0005, transparent 42%); }
  .portrait-page::after { content: ""; position: absolute; inset: 560px 0 0; pointer-events: none; background: linear-gradient(to bottom, transparent, #e4e4e01f 110px, #e4e4e047); }
  .biography { position: relative; z-index: 1; inset: auto; width: auto; max-width: 680px; margin: 0 auto; padding: 42px 30px 40px; font-size: 21px; line-height: 1.35; text-shadow: 0 1px 12px #0008; }
  h1 { font-size: clamp(43px, 8.5vw, 64px); line-height: 1.08; letter-spacing: -.018em; }
  .tagline { margin: 18px 0 0; font-size: 25px; }
  .rule { width: 74px; margin: 26px 0 0; background: #f5f4ef99; }
  .biography-copy { margin-top: clamp(420px, 62svh, 620px); color: #111; text-shadow: none; }
  p { margin-bottom: 28px; }
  .desktop-break { display: none; }
  .contact-links { position: relative; z-index: 1; inset: auto; max-width: 680px; margin: 0 auto; padding: 0 30px 36px; font-size: 20px; color: #111; text-shadow: none; }
  .contact-links small { color: #333; }
  .contact-links a:hover { color: #444; }
  ::selection { background: #eee; color: #111; }
}

@media (max-width: 350px) {
  .biography { padding: 32px 23px 36px; font-size: 20px; }
  h1 { font-size: 39px; }
  .contact-links { padding-left: 23px; padding-right: 23px; }
}

@media print {
  .portrait-page { height: auto; min-height: 0; background: #fff; color: #111; }
  .scenery, .phone-portrait, .portrait-page::after { display: none; }
  .biography { position: static; color: #111; text-shadow: none; width: auto; padding: 1cm; font-size: 14pt; }
  h1 { font-size: 32pt; }
  .biography-copy { margin-top: 1em; }
  .rule { margin: 1em 0; }
  p { margin-bottom: 1em; }
}

/* Content remains visible without JavaScript and for readers who reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  .biography-copy p.reveal-pending { opacity: 0; }
  .biography-copy p.reveal-visible { animation: paragraph-fade 1.5s ease-out both; animation-delay: var(--reveal-delay, 0ms); }
}
@keyframes paragraph-fade { from { opacity: 0; } to { opacity: 1; } }
@media print {
  .biography-copy p { opacity: 1 !important; animation: none !important; }
}