:root{--paper: #f0e6d2;--wall: #c8bca9;--gold: #b58538;--gold-dim: #896027;--text-soft: #5a4a36;--text: #1f130c;--frame: #140803;--painting-long: min( calc(100vw - 80px) , 80dvh, clamp(320px, 38vw, 640px))}@media (color-gamut: p3){:root{--paper: oklch(.93 .029 85);--wall: oklch(.8 .025 80);--gold: oklch(.65 .11 76);--gold-dim: oklch(.52 .09 72);--text-soft: oklch(.42 .04 73);--text: oklch(.2 .025 50);--frame: oklch(.15 .025 50)}}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}body{background:var(--wall);color:var(--text);font-family:EB Garamond,serif;font-size:1.125rem;line-height:1.7;-webkit-font-smoothing:antialiased;text-wrap:pretty;background-image:linear-gradient(to bottom,var(--wall) 0%,transparent 10%),repeating-radial-gradient(circle at 23% 47%,transparent 0,rgba(0,0,0,.028) 1px,transparent 2px),repeating-radial-gradient(circle at 71% 33%,transparent 0,rgba(0,0,0,.022) 1px,transparent 3px),repeating-radial-gradient(circle at 52% 88%,transparent 0,rgba(0,0,0,.025) 1px,transparent 2.5px)}body.lightbox-open{background:#120a04}:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.masthead{position:relative;z-index:10;padding:max(2.5rem,env(safe-area-inset-top) + 1.25rem) max(3rem,env(safe-area-inset-right) + 1.5rem) 1rem max(3rem,env(safe-area-inset-left) + 1.5rem);display:flex;justify-content:space-between;align-items:baseline}.signature{font-family:Italiana,serif;font-size:clamp(1.5rem,5vw,2rem);font-weight:400;letter-spacing:.3em}.nav-link{font-style:italic;font-size:1rem;color:var(--text-soft);text-decoration:none;overflow-wrap:anywhere;letter-spacing:.06em;transition:color .4s ease;display:inline-block;padding:.75rem .25rem;margin:-.75rem -.25rem;min-height:44px;-webkit-tap-highlight-color:transparent}.nav-link:hover{color:var(--text)}footer{background:var(--wall);padding:2rem max(2rem,env(safe-area-inset-right) + 1rem) max(2rem,env(safe-area-inset-bottom) + 1rem) max(2rem,env(safe-area-inset-left) + 1rem);text-align:center;font-style:italic;font-size:.75rem;border-top:1px solid var(--gold)}@media (min-width: 768px){.masthead{flex-direction:row;align-items:baseline}}@media (orientation: landscape) and (max-height: 500px){.masthead{flex-direction:row;align-items:baseline;padding:.75rem max(2rem,env(safe-area-inset-right) + 1rem) .4rem max(2rem,env(safe-area-inset-left) + 1rem)}}@media (max-width: 767px) and (orientation: portrait){.masthead{flex-direction:column;align-items:center;gap:.75rem;padding:max(1.75rem,env(safe-area-inset-top) + 1rem) max(1.5rem,env(safe-area-inset-right) + .75rem) .5rem max(1.5rem,env(safe-area-inset-left) + .75rem)}.signature{text-align:center}}.writing{position:relative;z-index:2;background:var(--paper);padding:clamp(5rem,8vw,9rem) clamp(2rem,3vw,4rem)}.writing-inner{max-width:620px;margin:auto;transform:translate(.5rem)}.writing h2{font-family:Italiana,serif;font-size:1rem;letter-spacing:.32em;text-transform:uppercase;margin-bottom:3.5rem;text-align:center;overflow-wrap:break-word}.writing p{margin-bottom:1.6rem;font-size:clamp(1.125rem,1.5vw,1.25rem);line-height:1.75}@supports (initial-letter: 3) or (-webkit-initial-letter: 3){.writing p.lead:first-letter{font-family:Italiana,serif;color:var(--frame);initial-letter:3;-webkit-initial-letter:3;margin-inline-end:.3em}}.divider{display:block;width:50px;height:1px;background:var(--text-soft);margin:3rem auto;opacity:.35;border:none}.contact{background:var(--frame);color:var(--gold);padding:clamp(4.5rem,7vw,8rem) clamp(1.5rem,3vw,4rem);text-align:center}.contact h2{font-family:Italiana,serif;font-size:1rem;letter-spacing:.32em;text-transform:uppercase;margin-bottom:3.5rem;text-align:center;overflow-wrap:break-word}.contact p{font-size:1.25rem;max-width:460px;margin:0 auto 2.5rem;color:var(--wall)}.contact a{font-family:Italiana,serif;font-size:1rem;letter-spacing:.28em;color:var(--gold);text-decoration:none;overflow-wrap:anywhere;border-bottom:1px solid var(--gold-dim);padding:.75rem .5rem .3125rem;display:inline-block;min-height:44px;transition:color .4s ease,border-color .4s ease;-webkit-tap-highlight-color:transparent}.contact a:hover{color:var(--paper);border-color:var(--paper)}.gallery{position:relative;z-index:2;max-width:1440px;margin:0 auto;padding:clamp(3rem,5vw,6rem) clamp(1.25rem,3vw,4rem) clamp(5rem,7vw,10rem);min-height:78dvh;display:flex;flex-direction:column;align-items:center;gap:clamp(4rem,10dvh,10rem)}.piece{display:flex;flex-direction:column;align-items:center;max-width:100%;opacity:0;animation:rise 1.6s cubic-bezier(.25,1,.5,1) forwards;animation-delay:calc(.4s + var(--i, 0) * .35s);will-change:opacity,transform}@keyframes rise{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.piece figure{display:flex;flex-direction:column;align-items:center;width:100%}@supports (animation-timeline: view()){.placard-story{transition:none;animation:story-fade linear both;animation-timeline:view();animation-range:contain 10% contain 40%}.piece:has(.frame.vigil) .placard-story{animation-range:contain 40% contain 70%}.piece:has(.frame.annunciation) .placard-story{animation-range:contain 10% contain 40%}@keyframes story-fade{0%{opacity:0}to{opacity:1}}}@media (prefers-reduced-motion: reduce){.piece{animation:none;opacity:1}.placard-story{transition:none;opacity:1;animation:none}}.frame{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;text-align:left;position:relative;background:linear-gradient(135deg,#4a3220,#2a1a0e 30%,#1a0f06 55%,#2a1a0e 75%,#3d2a1b);padding:14px;box-shadow:0 32px 50px -22px #0000008c,0 16px 28px -8px #00000059,inset 0 1px #ffd28c2e,inset 0 -2px 4px #0006,inset 2px 0 3px #0000004d,inset -2px 0 3px #0000004d;border-radius:2px;cursor:zoom-in;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.frame:focus{outline:none}.frame:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}@media (hover: none) and (pointer: coarse){.frame:focus-visible{outline:none}}.frame:before{content:"";position:absolute;top:9px;right:9px;bottom:9px;left:9px;border:1.5px solid var(--gold);box-shadow:inset 0 0 0 1px #0006,0 0 0 1px #0006;pointer-events:none;z-index:3}.canvas{position:relative;overflow:hidden;width:var(--painting-long);height:auto;max-width:100%;display:block}.frame.vigil .canvas{aspect-ratio:4 / 3}.frame.annunciation .canvas{aspect-ratio:3 / 4;width:calc(var(--painting-long) * 3 / 4);height:auto}.canvas img{width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity .5s ease;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;pointer-events:none}html.js .canvas img{opacity:0}html.js .canvas img.loaded{opacity:1}.placard{margin-top:2.2rem;text-align:center;max-width:320px}.placard-title{font-family:Italiana,serif;font-size:1.5rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.7rem}.placard-meta{font-style:italic;font-size:.75rem;color:var(--text-soft);letter-spacing:.03em}.placard-story{font-size:1rem;color:var(--text-soft);margin-top:1.4rem;line-height:1.65;overflow:hidden;min-height:0;opacity:1;transition:opacity .5s ease .2s}html.observe .placard-story{opacity:0}html.observe .piece.active .placard-story{opacity:1}#lightbox{margin:0;padding:0;border:none;background-color:transparent;background-image:linear-gradient(to bottom,#0f0804 5%,#120a04f5,#0f0804 95%);width:100dvw;height:100dvh;max-width:100dvw;max-height:100dvh;display:flex;align-items:center;justify-content:center;cursor:zoom-out;overscroll-behavior:contain;touch-action:manipulation;opacity:1;transition:opacity .4s cubic-bezier(.25,1,.5,1)}#lightbox:not([open]){display:none;opacity:0;pointer-events:none}#lightbox::backdrop{transition:opacity .4s cubic-bezier(.25,1,.5,1)}#lightbox picture{display:contents}#lightbox img{max-width:95vw;max-height:90dvh;object-fit:contain;box-shadow:0 40px 80px -20px #000c,0 0 0 1px var(--text);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .3s ease}#lightbox img.ready{opacity:1}#lightbox-close{position:absolute;top:max(1rem,env(safe-area-inset-top) + .5rem);right:max(1.5rem,env(safe-area-inset-left) + .75rem);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:var(--wall);font-family:EB Garamond,serif;font-style:italic;font-size:.8rem;letter-spacing:.1em;cursor:pointer;padding:.75rem .5rem;min-height:44px;min-width:44px;transition:color .3s ease;-webkit-tap-highlight-color:transparent}#lightbox-close:hover,#lightbox-close:focus-visible{color:var(--paper);outline:none}
