@font-face{font-family:'Postcard Hand';src:url('/assets/patrick-hand.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/assets/fraunces.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
.postcard-home{--postcard-edge-mask:url('/assets/postcards/paper-edge-mask.svg');background:#f8f8f8;color:#282a30;isolation:isolate;overflow-x:clip}
.postcard-home .skip-link{z-index:10}
.postcard-layout{--card-width:min(86vw,980px,calc((100svh - 300px)*1.6));width:100%;max-width:none;min-height:100svh;margin:0;padding:max(32px,calc((100svh - var(--card-width)*.625 - 180px)/2)) 28px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.postcard-heading{text-align:center;flex:none}
.postcard-heading h1{max-width:30ch;margin:0;font:600 50px/1.2 'Exposure VAR','Fraunces',Georgia,serif;font-variation-settings:'opsz' 72,'SOFT' 45,'WONK' 0;letter-spacing:-.04em;color:#262626}
.postcard-section{min-width:0;display:flex;flex-direction:column;align-items:center;margin-top:90px;margin-bottom:22px;flex:none}
.postcard-stage{width:var(--card-width);aspect-ratio:8/5;min-height:var(--postcard-min-height,0px);perspective:1800px;position:relative;outline-offset:12px;container-type:inline-size}
.postcard-tilt{height:100%;width:100%;position:absolute;inset:0;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotateZ(var(--tilt-z,0deg));transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.75,.25,1)}
.postcard-tilt.is-hovered{transition:transform .14s ease-out}
.postcard-turn{height:100%;width:100%;position:relative;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform .8s cubic-bezier(.65,0,.2,1)}
.postcard-turn.is-flipped{transform:rotateY(-180deg)}
.postcard-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid transparent;border-radius:2px;box-shadow:0 20px 38px -10px #29384926;background:transparent;cursor:pointer;touch-action:manipulation}
/* The paper silhouette has its own layer so clips, shadows and letters stay crisp. */
.postcard-face::before,.postcard-preview-paper::before,.postcard-print::before{content:'';position:absolute;inset:0;z-index:0;background:#fefefe;pointer-events:none;-webkit-mask:var(--postcard-edge-mask) center/100% 100% no-repeat;mask:var(--postcard-edge-mask) center/100% 100% no-repeat}
.postcard-art,.postcard-preview-paper>img,.postcard-print>img,.postcard-underleaf{-webkit-mask:var(--postcard-edge-mask) center/100% 100% no-repeat;mask:var(--postcard-edge-mask) center/100% 100% no-repeat}
.postcard-front{--postcard-front-inset:3.2cqw;--postcard-caption-height:3.2cqw;width:100%;height:100%;padding:var(--postcard-front-inset) var(--postcard-front-inset) 0;margin:0;display:grid;grid-template-rows:minmax(0,1fr) var(--postcard-caption-height);gap:0;overflow:visible;text-align:left;transform:translateZ(1px)}
.postcard-front:disabled{cursor:default;opacity:1}
.postcard-face:focus-visible{outline:2px solid #536b91;outline-offset:6px}
.postcard-art{width:100%;height:100%;min-height:0;display:block;object-fit:cover;object-position:center;user-select:none;border-radius:0;position:relative;z-index:1}
/* The mask insets both painted edges by 4/800 of their height. Center between
   those visible edges: padding/2 + .0025 * (paper height + artwork height). */
.postcard-mark{position:absolute;top:calc(var(--postcard-front-inset)*.4975 + .5% - var(--postcard-caption-height)*.0025);left:50%;transform:translate(-50%,-50%);width:1.2cqw;height:1.2cqw;object-fit:contain;pointer-events:none;user-select:none}
.postcard-caption{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;font:400 clamp(12px,1.3cqw,14px)/1 'Postcard Hand',cursive;color:#545451;letter-spacing:.025em}
.postcard-caption>span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.postcard-underleaf{position:absolute;left:-.8%;top:37%;width:39%;height:64%;background:#fff;transform:rotate(-10deg);box-shadow:-3px 5px 9px #29384909;z-index:-1;pointer-events:none}
.postcard-clip{position:absolute;width:5%;aspect-ratio:178/243;overflow:hidden;pointer-events:none;z-index:3}
.postcard-clip img{position:absolute;width:898.88%;max-width:none;height:auto;left:-96.63%;top:-83.95%;user-select:none}
.postcard-front>.postcard-clip{left:-1.9%;top:35.4%}
.postcard-back>.postcard-clip{right:-1.2%;top:35.5%;transform:rotate(66deg)}
.postcard-sheen{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,0%),#ffffff14,transparent 65%);pointer-events:none;opacity:0;transition:opacity .4s;z-index:2}
.is-hovered .postcard-sheen{opacity:1}
.postcard-back{transform:rotateY(180deg) translateZ(1px);pointer-events:none;overflow:visible}
.is-flipped .postcard-back{pointer-events:auto}
.is-flipped .postcard-front{pointer-events:none}
.postcard-letter{position:absolute;left:6%;top:13%;width:40%;height:auto;overflow:visible;padding:0;font:400 clamp(16px,2.05cqw,20px)/1.48 'Exposure VAR','Fraunces',Georgia,serif;font-variation-settings:'opsz' 12,'SOFT' 0,'WONK' 0;color:#000000b3;letter-spacing:0}
.postcard-flip-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.postcard-back:has(.postcard-flip-accessible:focus-visible){outline:2px solid #536b91;outline-offset:6px}
.postcard-letter p{margin:0 0 1.25cqw}
.postcard-letter .postcard-signature{display:flex;justify-content:flex-end;margin:1.5cqw 0 0;padding:0 2% 0 0;line-height:0}
.postcard-signature img{display:block;width:43%;height:auto;object-fit:contain;mix-blend-mode:multiply;opacity:.8;pointer-events:none;user-select:none}
.postcard-divider{position:absolute;left:49.2%;top:4%;height:84%;display:flex;align-items:center;justify-content:space-between;writing-mode:vertical-rl;transform:rotate(180deg);font:600 1.2cqw/1 'Courier New',monospace;letter-spacing:.09em;color:#dededb;opacity:.5;pointer-events:none}
.postcard-back-mark{position:absolute;height:auto;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;user-select:none}
.postcard-back-mark{left:50%;bottom:3.2%;width:2.8cqw;transform:translateX(-50%);opacity:.6}
.postcard-postage{position:absolute;right:3%;top:2.4%;width:25%;height:auto;max-width:none;mix-blend-mode:multiply;pointer-events:none;user-select:none}
.postcard-print{position:absolute;left:67%;top:35.5%;width:34%;height:66%;margin:0;padding:1.7% 1.7% 4.5%;background:transparent;box-shadow:0 6px 15px #2d36401a;transform:rotate(10deg);z-index:2}
.postcard-print>img{position:relative;z-index:1;display:block;width:100%;height:100%;min-height:0;object-fit:cover;object-position:50% 43%;user-select:none}
.postcard-home .site-footer{height:44px;min-height:44px;padding:0;margin:auto 0 0;display:flex;justify-content:center;align-items:center;flex:none}
.postcard-home .footer-navigation{gap:32px;justify-content:center;flex-wrap:nowrap}
.postcard-home .footer-navigation a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-size:.875rem;color:#5d6981;text-decoration:none}
.postcard-home .footer-navigation a:hover,.postcard-home .footer-navigation a[aria-current]{color:#253249}
.postcard-noscript{max-width:580px;margin:36px auto 0;font:400 1.125rem/1.5 'Crimson Pro',Georgia,serif}
.postcard-noscript p{margin-bottom:1em}
@media(max-width:799px){.postcard-heading h1{font-size:40px}.postcard-section{margin-top:56px}.postcard-layout{padding-top:48px}}
@media(max-height:640px) and (min-width:640px){
 .postcard-layout{--card-width:min(78vw,680px,calc((100svh - 230px)*1.6));padding-top:28px;padding-bottom:20px}
 .postcard-heading h1{font-size:40px}
 .postcard-section{margin-top:40px;margin-bottom:44px}
 .postcard-letter{top:8%;font-size:1rem;line-height:1.4}
}
/* Equal outer rows center the paper itself, including any height needed by the letter. */
@media screen and (min-width:640px) and (min-height:641px){
 .postcard-layout{--postcard-edge:max(24px,env(safe-area-inset-top),env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(min-content,1fr) auto minmax(min-content,1fr);justify-items:center;align-items:stretch;padding:var(--postcard-edge) 28px}
 .postcard-heading{align-self:end;margin-bottom:44px}
 .postcard-section{margin:0}
 .postcard-home .site-footer{align-self:end;margin:44px 0 0}
}
@media(prefers-reduced-motion:reduce){.postcard-tilt,.postcard-turn{transition:none;transform:none}.postcard-turn.is-flipped{transform:none}.postcard-back{transform:none}.postcard-front{visibility:visible}.postcard-back{visibility:hidden}.is-flipped .postcard-front{visibility:hidden}.is-flipped .postcard-back{visibility:visible}.postcard-sheen{display:none}}
@media print{.postcard-home .site-footer,.postcard-heading,.postcard-print,.postcard-clip,.postcard-underleaf{display:none}.postcard-layout{display:block;min-height:0;padding:0}.postcard-stage{width:100%;aspect-ratio:auto;min-height:0}.postcard-tilt{position:relative}.postcard-tilt,.postcard-turn,.postcard-back{transform:none!important}.postcard-front{position:relative;height:auto;aspect-ratio:8/5}.postcard-back{position:relative;margin-top:24px;min-height:300px;visibility:visible}.postcard-letter{position:relative;inset:auto;padding:24px;width:100%;height:auto;overflow:visible}.postcard-postage,.postcard-divider{display:none}}

/* The first viewport keeps its own three-row composition; the collection follows. */
.postcard-page{width:100%;max-width:none;margin:0;padding:0}
.postcard-archive{position:relative;z-index:1;width:min(86vw,980px);margin:0 auto;padding:90px 0 130px}
.postcard-archive h2{margin:0 0 38px;text-align:center;color:#44443f;font:500 28px/1.2 'Fraunces',Georgia,serif;letter-spacing:-.035em}
.postcard-archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.postcard-preview{display:block;min-width:0;color:#545451;text-decoration:none;outline-offset:10px;touch-action:manipulation}
.postcard-preview[hidden]{display:none}
.postcard-preview-paper{position:relative;display:block;padding:3.2% 3.2% 0;background:transparent;border:1px solid transparent;border-radius:2px;box-shadow:0 9px 18px -7px #2938492a;transition:transform .35s ease,box-shadow .35s ease}
.postcard-preview-paper>img{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;border-radius:0}
.postcard-preview-caption{position:relative;z-index:1}
.postcard-preview-caption{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:27px;font:400 13px/1.2 'Postcard Hand',cursive;letter-spacing:.01em}
.postcard-preview-caption>span:last-child{font-variant-numeric:tabular-nums}
.postcard-preview:nth-child(even) .postcard-preview-paper{transform:rotate(1deg)}
.postcard-preview:nth-child(odd) .postcard-preview-paper{transform:rotate(-1deg)}
@media(hover:hover) and (pointer:fine){.postcard-preview:hover .postcard-preview-paper{transform:translateY(-5px) rotate(0deg);box-shadow:0 16px 22px -9px #29384938}}
.postcard-preview:focus-visible{outline:2px solid #536b91;border-radius:5px}
.postcard-archive-more{display:block;min-height:44px;margin:40px auto 0;padding:8px 18px;border:0;border-radius:0;background:transparent;color:#565b64;font:inherit;font-size:.875rem;line-height:1.4;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.postcard-archive-more[hidden]{display:none}
.postcard-collection-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.postcard-archive[data-load-error] .postcard-collection-status{position:static;width:auto;height:auto;margin:24px 0 0;overflow:visible;clip-path:none;white-space:normal;text-align:center;color:#6a483d;font-size:.875rem}
.postcard-stage{opacity:1;translate:0 0;transition:opacity .26s ease,translate .4s ease}
.postcard-stage.is-changing{opacity:0;translate:0 8px;pointer-events:none}
.postcard-stage.is-changing .postcard-turn{transition:none}
@media(max-width:799px){.postcard-archive{padding-top:64px}.postcard-archive-grid{gap:22px}}
/* Keep the title anchored to the cover; the letter uses the space below it. */
@media(max-width:639px),(max-height:500px) and (orientation:landscape){
 .postcard-layout{--card-width:min(calc(100vw - 36px),440px);--postcard-cover-height:calc(var(--card-width)*.6 + 38px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(min-content,max(64px,calc((100svh - 128px - env(safe-area-inset-bottom) - var(--postcard-cover-height))/2))) auto minmax(0,1fr);align-items:stretch;justify-items:center;min-height:100svh;padding:24px 18px calc(104px + env(safe-area-inset-bottom));overflow-anchor:none;z-index:auto}
 .postcard-heading{align-self:end;width:100%;margin:0 0 28px}
 .postcard-heading h1{font-size:clamp(28px,8.2vw,36px);line-height:1.12;max-width:none;letter-spacing:-.045em;text-wrap:balance}
 .postcard-section{margin:0;width:100%}
 .postcard-stage{aspect-ratio:auto;min-height:0;height:var(--postcard-cover-height,calc(var(--card-width)*.6 + 38px));transition:height .58s cubic-bezier(.22,.7,.2,1),opacity .26s ease,translate .4s ease;outline-offset:6px}
 .postcard-stage.is-reading{height:var(--postcard-back-height,380px)}
 .postcard-face{border-radius:2px;box-shadow:0 16px 30px -12px #29384930}
 .postcard-front{--postcard-front-inset:3.8cqw;--postcard-caption-height:34px;inset:0 0 auto;height:auto;display:block}
 .postcard-art{height:auto;min-height:0;object-fit:contain;object-position:center}
 .postcard-mark{width:2.16cqw;height:2.16cqw}
 .postcard-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:var(--postcard-caption-height);padding:5px 0 7px;gap:10px;font-size:14px;line-height:1.15;letter-spacing:0}
 .postcard-caption>span:first-child{overflow-wrap:break-word}
 .postcard-underleaf{left:-.2%;width:36%;height:62%;transform:rotate(-7deg)}
 .postcard-front>.postcard-clip{left:-1.2%;width:5.3%}
 .postcard-back{inset:0 0 auto;height:auto;min-height:var(--postcard-cover-height);padding:26px 6.5% 22px;display:flex;flex-direction:column;justify-content:flex-start}
 .postcard-letter{position:relative;inset:auto;z-index:1;width:100%;font-size:1rem;line-height:1.45;color:#44443f;letter-spacing:-.008em}
 .postcard-letter p{margin:0 0 .625em}
 .postcard-letter .postcard-signature{position:static;width:100%;margin:12px 0 0;padding:0;align-items:flex-end}
 .postcard-signature img{width:88px;max-width:35%}
 .postcard-divider{display:none}
 .postcard-postage{left:auto;right:3%;top:16px;bottom:auto;z-index:0;width:42%;max-width:none;opacity:.34}
 .postcard-print,.postcard-back>.postcard-clip{display:none}
 .postcard-back-mark{bottom:10px;width:10px}
 .postcard-home[data-postcard-current="hello-from-amsterdam"] .postcard-letter .postcard-signature{min-height:58px}
 .postcard-home[data-postcard-current="hello-from-amsterdam"] .postcard-print{display:block;left:6.5%;top:auto;bottom:20px;width:48px;height:58px;padding:3px 3px 8px;transform:rotate(-6deg)}
 .postcard-home .site-footer{position:fixed;z-index:20;inset:auto 0 0;width:100%;height:calc(76px + env(safe-area-inset-bottom));min-height:76px;margin:0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,#f8f8f861 0%,#f8f8f82e 48%,#f8f8f800 100%);align-self:auto}
 .postcard-home .footer-navigation{gap:28px}
 .postcard-home .footer-navigation a{min-width:52px;min-height:48px;font-size:15px}
 .postcard-home .footer-navigation a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
 .postcard-archive{width:min(calc(100vw - 40px),440px);padding:36px 0 calc(120px + env(safe-area-inset-bottom))}
 .postcard-archive h2{font-size:25px;margin-bottom:30px}
 .postcard-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px;align-items:start}
 .postcard-preview-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;min-height:46px;padding:7px 1px 8px;gap:6px;font-size:14px;line-height:1.2}
 .postcard-preview-caption>span:first-child{overflow-wrap:break-word}
 .postcard-preview:nth-child(even) .postcard-preview-paper{transform:rotate(.7deg)}
 .postcard-preview:nth-child(odd) .postcard-preview-paper{transform:rotate(-.7deg)}
 .postcard-archive-more{margin-top:28px;min-height:48px}
 .postcard-noscript{font-size:1.0625rem;margin-bottom:40px}
}
/* Short landscape screens keep a full cover beside the title and navigation. */
@media(max-height:500px) and (orientation:landscape){
 .postcard-layout{--card-width:min(52vw,calc((100svh - 64px)*1.5),560px);grid-template-columns:minmax(150px,220px) var(--card-width);grid-template-rows:calc(50svh - 20px) 1fr;column-gap:clamp(24px,4vw,48px);justify-content:center;align-content:center;padding:max(20px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left))}
 .postcard-heading{grid-column:1;grid-row:1;align-self:end;margin:0 0 24px}
 .postcard-heading h1{max-width:9ch;margin-inline:auto;font-size:clamp(26px,3.4vw,34px);line-height:1.12}
 .postcard-section{grid-column:2;grid-row:1 / 3;align-self:center}
 .postcard-home .site-footer{grid-column:1;grid-row:2;position:static;inset:auto;align-self:start;width:100%;height:44px;min-height:44px;padding:0;margin:0;background:none}
 .postcard-home .site-footer .footer-navigation{gap:12px}
 .postcard-home .footer-navigation a{min-width:44px;min-height:44px;font-size:14px}
 .postcard-archive{width:min(calc(100vw - 80px),800px);padding-top:40px;padding-bottom:max(48px,env(safe-area-inset-bottom))}
 .postcard-archive-grid{gap:28px;max-width:640px;margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){.postcard-stage,.postcard-preview-paper{transition:none}.postcard-stage.is-changing{translate:none}.postcard-preview .postcard-preview-paper{transform:none!important}}
@media print{.postcard-archive{display:none}}