/*
 * Living correspondence surfaces and mounted-media behavior adapted from
 * BaylenJack/love-letter (MIT). The differential film-grid motion is adapted
 * from codrops/ScrollAnimationsGrid (MIT). See THIRD_PARTY.md.
 */

:root {
  color-scheme: light;
  --canvas: #b9b4ac;
  --paper: #f6f1e8;
  --paper-deep: #eae1d4;
  --ink: #27231f;
  --muted: #706960;
  --accent: #854a43;
  --body-font: "Spectral", Georgia, serif;
  --hand-font: "Caveat", cursive;
  --paper-shadow: 0 28px 62px rgba(39, 35, 31, .17), 0 5px 14px rgba(39, 35, 31, .1);
  --photo-shadow: 0 18px 32px -15px rgba(39, 35, 31, .54), 0 4px 10px rgba(39, 35, 31, .12);
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  overflow-x: clip;
  background: var(--canvas);
  scroll-behavior: smooth;
}

html.reduced-motion { scroll-behavior: auto; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(246,241,232,.16), transparent 23rem),
    linear-gradient(112deg, rgba(39,35,31,.035), transparent 32%, rgba(246,241,232,.05) 72%, transparent),
    var(--canvas);
  font: 400 18px/1.68 var(--body-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.studio {
  position: relative;
  width: min(calc(100% - 56px), 1320px);
  margin: 28px auto 80px;
  isolation: isolate;
}

html.wide-capture .studio { margin-right: 0; margin-left: 60px; }

.canvas-grain {
  position: fixed;
  z-index: -3;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.73' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity: .055;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.correspondence { position: relative; }
.letter-flow { position: relative; }

.scene {
  position: relative;
  width: 100%;
  isolation: isolate;
}

.paper-surface,
.paper-fragment {
  background:
    linear-gradient(96deg, rgba(255,255,255,.075), transparent 31%, rgba(39,35,31,.015) 71%, transparent),
    var(--paper);
  box-shadow: var(--paper-shadow);
}

.paper-texture {
  position: absolute;
  z-index: 12;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.52'/%3E%3C/svg%3E");
  opacity: .034;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.paper-edge {
  position: absolute;
  z-index: -1;
  background: var(--paper-deep);
  box-shadow: 0 8px 20px rgba(39,35,31,.07);
  pointer-events: none;
}

.paper-edge-one { right: -13px; bottom: -11px; width: 64%; height: 45%; transform: rotate(.35deg); }
.paper-edge-two { top: -12px; bottom: 13%; left: 27px; width: 49%; transform: rotate(-.22deg); }
.paper-edge-three { top: 13%; right: -12px; bottom: -14px; width: 58%; transform: rotate(.25deg); }
.paper-edge-four { top: 14px; right: 18px; bottom: -15px; left: 10%; transform: rotate(-.18deg); }

.opening-scene {
  min-height: 0;
  padding: 54px 72px 70px;
  clip-path: polygon(0 0, 100% 0, 100% 96%, 73% 97.5%, 42% 96.5%, 0 100%);
  transform-origin: 50% 0;
}

.js:not(.entered):not(.reduced-motion) .opening-scene {
  opacity: .52;
  transform: perspective(1500px) rotateX(-1.4deg) translateY(12px) scaleY(.99);
}

.identity-mark {
  position: relative;
  z-index: 4;
  display: block;
  width: max-content;
  color: var(--accent);
  font: 600 27px/1 var(--hand-font);
  transform: rotate(-2deg);
}

.identity-mark::after {
  display: block;
  width: 38px;
  height: 1px;
  margin-top: 4px;
  background: var(--accent);
  opacity: .78;
  content: "";
}

.opening-copy-block {
  position: relative;
  z-index: 3;
  width: min(53%, 620px);
  margin-top: 42px;
}

.correspondence h1 {
  margin: 0 0 18px;
  font: 600 51px/.98 var(--hand-font);
  letter-spacing: -.025em;
}

.correspondence p { margin: 0 0 21px; }
.opening-copy { font-size: 20px; line-height: 1.58; }

/* PFold port: perspective, top-edge transform origin and temporary shadow. */
.reply-enclosure {
  position: relative;
  z-index: 8;
  width: min(580px, 62%);
  margin: 38px 0 0 clamp(54px, 7vw, 112px);
  perspective: 1200px;
  outline: none;
}

.reply-underlay {
  position: absolute;
  z-index: -2;
  inset: 13px -13px -12px 16px;
  background: rgba(112,105,96,.14);
  transform: rotate(.7deg);
}

.reply-fold {
  position: relative;
  min-height: 276px;
  padding: 29px 31px 25px;
  background:
    linear-gradient(112deg, rgba(255,255,255,.13), transparent 46%),
    var(--paper-deep);
  box-shadow: 9px 10px 0 rgba(39,35,31,.055), 0 14px 25px -18px rgba(39,35,31,.49);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.js:not(.entered):not(.reduced-motion) .reply-fold { opacity: .7; transform: rotateX(-72deg) scaleY(.965); }

.fold-shadow {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(180deg, rgba(39,35,31,.28), rgba(39,35,31,.025) 57%, transparent);
  opacity: 0;
  pointer-events: none;
}

.rough-reply-line { position: absolute; z-index: 4; top: -3px; left: 11px; width: calc(100% - 22px); height: 9px; pointer-events: none; }
.reply-content { position: relative; z-index: 2; }
.reply-enclosure h2 { margin: 0 0 18px; font: 500 29px/1.2 var(--body-font); }

.amounts {
  display: flex;
  min-height: 58px;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
}

.amounts button {
  position: relative;
  min-width: 58px;
  min-height: 58px;
  padding: 10px 9px;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: color .16s ease, transform .14s ease;
}

.amounts button:last-child { min-width: 72px; }
.amounts button:hover { color: var(--accent); transform: translateY(-1px); }
.amounts button:active { transform: translateY(1px); }
.amounts button[aria-pressed="true"] { color: var(--accent); font-weight: 600; }

.paypal-button {
  display: flex;
  min-height: 59px;
  margin-top: 16px;
  padding: 13px 18px;
  border: 1px solid var(--ink);
  align-items: center;
  color: var(--paper);
  background: var(--ink);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: color .18s ease, background .18s ease, transform .12s ease;
}

.paypal-button::after { margin-left: auto; font-size: 20px; line-height: 1; content: "→"; transition: transform .18s ease; }
.paypal-button:hover { color: var(--ink); background: transparent; }
.paypal-button:hover::after { transform: translateX(5px); }
.paypal-button:active { transform: translateY(1px); }

.other-payments { display: flex; margin-top: 17px; justify-content: flex-start; gap: 34px; font-size: 14px; }
.other-payments a, .proof-links a, .return-note a { position: relative; text-decoration: none; }
.other-payments a::after, .proof-links a::after, .return-note a::after {
  position: absolute; right: 0; bottom: -3px; left: 0; height: 1px; background: var(--accent);
  transform: scaleX(.28); transform-origin: left; transition: transform .22s ease; content: "";
}
.other-payments a:hover::after, .other-payments a:focus-visible::after,
.proof-links a:hover::after, .proof-links a:focus-visible::after,
.return-note a:hover::after, .return-note a:focus-visible::after { transform: scaleX(1); }

.portrait {
  position: absolute;
  z-index: 6;
  top: 112px;
  right: 48px;
  width: 34%;
  max-width: 420px;
  min-width: 310px;
  aspect-ratio: 4 / 5;
}

.photo-mount { margin: 0; padding: 10px 10px 28px; background: var(--paper-deep); box-shadow: var(--photo-shadow); transform: rotate(1.15deg); transition: transform .25s ease, box-shadow .25s ease; }
.photo-mount img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--paper-deep); }
.photo-mount.is-moving { box-shadow: 0 22px 38px -17px rgba(39,35,31,.56), 0 5px 12px rgba(39,35,31,.14); }

.prose-thread { width: min(100%, 620px); position: relative; z-index: 3; }

.context-scene {
  z-index: 2;
  width: calc(100% - 62px);
  margin: -33px 0 0 35px;
  padding: 130px 80px 112px;
  clip-path: polygon(1% 1.5%, 97% 0, 100% 98%, 62% 100%, 0 98.6%);
}
.context-prose { margin-left: clamp(8px, 7vw, 96px); }
.context-prose p:nth-child(3), .context-prose p:nth-child(6), .context-prose p:nth-child(7), .context-prose p:nth-child(8), .context-prose p:nth-child(10) { margin-left: clamp(24px, 6vw, 74px); }
.context-prose p:nth-child(3), .context-prose p:nth-child(10) { font-size: 23px; font-style: italic; }
.making-scene {
  z-index: 3;
  width: calc(100% - 104px);
  margin: -38px 0 0 83px;
  min-height: 0;
  padding: 116px 84px 86px;
  clip-path: polygon(0 2%, 100% 0, 98.6% 100%, 4% 98.5%);
}
.making-prose { margin-left: auto; margin-right: 75px; }
.making-prose p:first-child { font-size: 24px; font-style: italic; }
.software-media { position: relative; width: 72%; min-height: 330px; margin: 20px 0 70px; }
.software-media[hidden] { display: none; }
.software-media figure { position: absolute; margin: 0; background: var(--paper-deep); box-shadow: var(--photo-shadow); overflow: hidden; }
.software-media figure:first-child { inset: 8px 14% 36px 0; transform: rotate(-1deg); }
.software-media figure:nth-child(2) { top: 82px; right: -8%; width: 47%; height: 66%; transform: rotate(1.4deg); }
.software-media img { width: 100%; height: 100%; object-fit: contain; }
.biology-prose { margin: 42px 0 0 80px; }
.film-intro-prose { position: relative; z-index: 5; width: 320px; margin: 58px 0 0 auto; font-size: 29px; font-style: italic; }
html.has-software-media .making-scene { min-height: 890px; }

.film-scene {
  z-index: 5;
  width: calc(100% + 48px);
  min-height: 920px;
  margin: -56px 0 -38px -24px;
  padding: 120px 70px 118px;
  overflow: hidden;
}

html:not(.has-film-stills) .film-scene { min-height: 820px; }
.film-field { position: absolute; z-index: -3; inset: 35px 0; background: #292725; box-shadow: 0 28px 65px rgba(39,35,31,.28); clip-path: polygon(0 3%, 99% 0, 100% 94%, 78% 100%, 1% 96%); }
.film-perforations { position: absolute; z-index: -1; left: 40px; width: calc(100% - 80px); height: 13px; background: repeating-linear-gradient(90deg, var(--paper-deep) 0 23px, transparent 23px 38px); opacity: .7; }
.perforations-top { top: 57px; }.perforations-bottom { bottom: 62px; }
.film-copy { position: relative; z-index: 4; width: min(590px, 54%); margin: 90px 0 0 auto; padding: 52px 56px 42px; transform: rotate(.38deg); }
.film-copy p:last-child { margin-bottom: 0; font-size: 22px; font-style: italic; }
.film-grid { position: absolute; z-index: 1; inset: 24px 0; pointer-events: none; }
.film-frame { position: absolute; margin: 0; overflow: hidden; border: 3px solid rgba(246,241,232,.78); background: #34312e; box-shadow: 0 16px 30px rgba(22,20,18,.4); will-change: transform; }
.film-frame.is-empty { border-color: rgba(246,241,232,.22); background: #312f2c; box-shadow: inset 0 0 0 1px rgba(246,241,232,.035), 0 13px 26px rgba(15,14,13,.24); }
.film-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-frame:nth-child(1) { top: 9%; left: 3%; width: 42%; height: 35%; }
.film-frame:nth-child(2) { top: 4%; right: 6%; width: 26%; height: 25%; }
.film-frame:nth-child(3) { top: 45%; left: -2%; width: 34%; height: 31%; }
.film-frame:nth-child(4) { bottom: 4%; left: 23%; width: 30%; height: 24%; }
.film-frame:nth-child(5) { bottom: 8%; right: 1%; width: 39%; height: 36%; }
.film-frame:nth-child(6) { top: 31%; right: 25%; width: 18%; height: 19%; }
.film-frame:nth-child(7) { top: 11%; left: 48%; width: 15%; height: 17%; }
.film-frame:nth-child(8) { bottom: 25%; left: 50%; width: 16%; height: 20%; }
.film-frame:nth-child(9) { top: 48%; right: 12%; width: 20%; height: 18%; }
.film-frame:nth-child(10) { bottom: 5%; left: 4%; width: 17%; height: 19%; }

.camera-creature {
  position: absolute;
  z-index: 9;
  left: 38px;
  top: 112px;
  width: 86px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  transform-origin: 50% 100%;
}
.camera-creature svg { display: block; width: 100%; height: 100%; overflow: visible; }
.camera-body { fill: var(--accent); stroke: var(--ink); stroke-width: 2.2; }
.camera-panel { fill: var(--paper-deep); stroke: var(--ink); stroke-width: 1.5; }
.camera-button { fill: var(--ink); }
.camera-reel > circle:first-child { fill: var(--paper-deep); stroke: var(--ink); stroke-width: 2; }
.reel-eye { fill: var(--ink); stroke: none; }
.camera-reel path, .camera-lens path, .camera-lens circle, .camera-leg, .camera-arm { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.camera-lens path { fill: var(--paper-deep); }
.camera-lens circle { fill: var(--ink); }
.camera-shadow { fill: rgba(20,18,16,.25); }
.camera-filmstrip { opacity: 0; transform-origin: 83px 43px; }
.camera-filmstrip path:first-child { fill: var(--paper-deep); stroke: var(--ink); stroke-width: 1.4; }
.camera-filmstrip path:last-child { fill: none; stroke: var(--ink); stroke-width: 1.1; }
.camera-flash { fill: var(--paper); opacity: 0; transform-origin: 83px 42px; }
.camera-reel, .camera-lens, .camera-leg, .camera-arm, .camera-rig { transform-box: fill-box; }
.camera-reel { transform-origin: center; }.camera-lens { transform-origin: left center; }.camera-leg { transform-origin: top center; }.camera-arm { transform-origin: right top; }.camera-rig { transform-origin: center bottom; }

.personal-scene {
  z-index: 4;
  width: calc(100% - 80px);
  margin-left: 64px;
  padding: 140px 82px 120px;
  clip-path: polygon(1.3% 0, 100% 2%, 97.6% 100%, 0 97%);
}
.personal-prose { margin-left: clamp(16px, 8vw, 130px); }
.personal-prose p:nth-child(1), .personal-prose p:nth-child(7) { font-size: 23px; font-style: italic; }
.personal-photo { position: absolute; top: 220px; right: -52px; width: 310px; aspect-ratio: 5 / 4; transform: rotate(1.6deg); }

.financial-scene {
  z-index: 3;
  width: calc(100% - 164px);
  margin: -28px 0 0 26px;
  padding: 142px 82px 118px;
  clip-path: polygon(0 1%, 99% 0, 100% 97%, 6% 100%);
}
.financial-prose { margin-left: auto; margin-right: 20px; }
.financial-prose p:nth-child(3), .financial-prose p:nth-child(8) { margin: 40px 0; font-size: 25px; font-style: italic; }

.future-scene {
  z-index: 2;
  width: calc(100% - 60px);
  margin: -34px 0 0 54px;
  padding: 130px 82px 118px;
  clip-path: polygon(2% 0, 100% 2%, 98% 98%, 0 100%);
}
.future-prose { margin-left: clamp(8px, 6vw, 96px); }
.future-prose p:nth-child(2), .future-prose p:nth-child(3), .future-prose p:nth-child(4), .future-prose p:nth-child(5) { margin-left: 42px; }

.closing-scene {
  z-index: 5;
  width: calc(100% - 138px);
  margin: -28px 0 0 92px;
  padding: 132px 78px 94px;
  clip-path: polygon(0 1%, 100% 0, 98.5% 100%, 2% 98.7%);
}
.closing-prose { margin: 0 auto; }
.closing-prose > p:nth-child(4), .closing-prose > p:nth-child(11) { font-size: 23px; font-style: italic; }
.closing { margin-top: 56px; }
.signature { width: max-content; margin: 28px 0 50px !important; color: var(--accent); font: 600 56px/1 var(--hand-font); transform: rotate(-2deg); }
.postscript { padding: 30px 32px 25px; background: rgba(234,225,212,.65); box-shadow: 7px 7px 0 rgba(39,35,31,.045); }
.proof-links { display: flex; flex-wrap: wrap; gap: 16px 34px; margin-top: 4px; font-size: 15px; }
.return-note { margin: 32px 0 0 !important; color: var(--muted); font-size: 15px; }

.hover-preview { position: fixed; z-index: 50; top: 0; left: 0; width: 230px; height: 160px; overflow: hidden; opacity: 0; pointer-events: none; }
.hover-preview-inner { width: 100%; height: 100%; overflow: hidden; }
.hover-preview img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1040px) {
  .studio { width: min(calc(100% - 36px), 980px); }
  .opening-scene { min-height: 0; padding: 48px 52px 65px; }
  .opening-copy-block { width: 57%; }
  .reply-enclosure { width: min(580px, 70%); margin-left: 30px; }
  .portrait { right: 32px; width: 34%; min-width: 260px; }
  .context-scene, .making-scene, .personal-scene, .financial-scene, .future-scene, .closing-scene { padding-right: 58px; padding-left: 58px; }
  .film-copy { width: 59%; }
}

@media (max-width: 760px) {
  body { font-size: 17px; line-height: 1.66; }
  .studio { width: calc(100% - 24px); margin: 12px auto 38px; }
  .scene, .context-scene, .making-scene, .film-scene, .personal-scene, .financial-scene, .future-scene, .closing-scene {
    width: calc(100% + 8px); margin-right: 0; margin-left: -4px; clip-path: none;
  }
  .opening-scene { min-height: 0; padding: 31px 25px 56px; }
  .identity-mark { font-size: 24px; }
  .opening-copy-block { width: 100%; margin-top: 29px; }
  .correspondence h1 { font-size: 43px; margin-bottom: 14px; }
  .opening-copy { font-size: 17px; line-height: 1.58; }
  .reply-enclosure { width: calc(100% + 2px); margin: 25px 0 0 -1px; }
  .reply-fold { padding: 23px 18px 20px; min-height: 252px; }
  .reply-enclosure h2 { font-size: 25px; margin-bottom: 15px; }
  .amounts { gap: 4px; min-height: 54px; }
  .amounts button { min-width: 48px; min-height: 54px; padding: 8px 3px; font-size: 15px; }
  .amounts button:last-child { min-width: 58px; }
  .paypal-button { min-height: 57px; margin-top: 14px; padding: 12px 16px; font-size: 15px; }
  .other-payments { gap: 0; margin-top: 15px; justify-content: space-between; font-size: 12px; }
  .portrait { position: relative; top: auto; right: auto; width: 72%; min-width: 0; margin: 30px 0 -28px auto; }
  .paper-edge { display: none; }
  .context-scene, .making-scene, .personal-scene, .financial-scene, .future-scene, .closing-scene { padding: 82px 25px 74px; }
  .context-scene { margin-top: -15px; }
  .prose-thread, .context-prose, .making-prose, .biology-prose, .film-intro-prose, .personal-prose, .financial-prose, .future-prose, .closing-prose { width: 100%; margin-right: 0; margin-left: 0; }
  .context-prose p:nth-child(3), .context-prose p:nth-child(6), .context-prose p:nth-child(7), .context-prose p:nth-child(8), .context-prose p:nth-child(10),
  .future-prose p:nth-child(2), .future-prose p:nth-child(3), .future-prose p:nth-child(4), .future-prose p:nth-child(5) { margin-left: 18px; }
  .making-scene { min-height: 0; padding-top: 90px; padding-bottom: 76px; }
  .software-media { width: 100%; min-height: 250px; }
  .film-intro-prose { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 44px; font-size: 26px; }
  .film-scene { min-height: 860px; margin-top: -34px; padding: 92px 18px 90px; }
  html:not(.has-film-stills) .film-scene { min-height: 820px; }
  .film-field { inset: 23px -5px; clip-path: polygon(0 2%,100% 0,100% 97%,0 100%); }
  .film-perforations { left: 14px; width: calc(100% - 28px); }
  .perforations-top { top: 38px; }.perforations-bottom { bottom: 39px; }
  .film-copy { width: calc(100% - 36px); margin: 150px auto 0; padding: 35px 26px 29px; }
  .camera-creature { top: 83px; left: 13px; width: 70px; height: 53px; }
  .film-frame:nth-child(n) { position: absolute; }
  .film-frame:nth-child(1) { top: 8%; left: -5%; width: 76%; height: 26%; }
  .film-frame:nth-child(2) { top: 25%; right: -5%; width: 55%; height: 22%; }
  .film-frame:nth-child(3) { top: 48%; left: -6%; width: 60%; height: 21%; }
  .film-frame:nth-child(4) { bottom: 6%; left: 16%; width: 67%; height: 23%; }
  .film-frame:nth-child(n+5) { display: none; }
  .personal-photo { position: relative; top: auto; right: auto; width: 78%; margin: 28px -15px 40px auto; }
  .financial-scene { margin-top: -18px; padding-top: 96px; }
  .financial-prose p:nth-child(3), .financial-prose p:nth-child(8) { font-size: 22px; }
  .closing-scene { padding-bottom: 68px; }
  .postscript { padding: 24px 20px 21px; }
  .proof-links { gap: 14px 25px; }
  .hover-preview { display: none; }
}

@media (max-width: 390px) {
  .studio { width: calc(100% - 20px); margin-top: 10px; }
  .opening-scene { min-height: 0; padding-right: 22px; padding-left: 22px; }
  .context-scene, .making-scene, .personal-scene, .financial-scene, .future-scene, .closing-scene { padding-right: 22px; padding-left: 22px; }
  .other-payments { font-size: 11px; }
  .film-copy { width: calc(100% - 25px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .opening-scene, .reply-fold, .camera-creature, .film-frame { opacity: 1 !important; transform: none !important; }
}