/* Layout: one long walk from the doorstep into the museum, a narrow reading column with wide picture bands between. */
@font-face{font-family:'Cormorant Garamond';src:url('img/cormorant-garamond-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('img/cormorant-garamond-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('img/nunito-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('img/nunito-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
 /* the museum at night: petrol walls, lamp-lit parchment, brass */
 --night:#0d2527;--night-2:#143436;--parchment:#f1e3c3;--parchment-dim:#cdbb95;--brass:#d6a64a;--brass-hi:#f3d48a;--wood:#4a2f1c;--ink:#2a1a0e;
 --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;--body:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
 --step-0:1rem;--step-1:1.25rem;--step-2:1.75rem;--step-3:2.4rem;--step-4:clamp(2.6rem,9vw,4.6rem);
 color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--night);color:var(--parchment);font:600 var(--step-0)/1.6 var(--body);padding-inline:16px;padding-block:0}
img{max-width:100%;height:auto;display:block}   /* the width/height attributes only reserve the aspect ratio: never a fixed height */
a{color:var(--brass-hi)}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}
.wrap{max-width:1080px;margin-inline:auto}
.read{max-width:34rem;margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0;line-height:1.08;color:var(--parchment)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
p{margin:0}
.kicker{font:700 .78rem var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
section{padding-block:clamp(56px,10vw,110px);display:grid;gap:28px}


/* hero: the letter on the doorstep */
.hero{padding-top:28px;gap:22px;text-align:center;justify-items:center}
.hero .logo{width:min(300px,70%)}
.hero h1{font-size:var(--step-4)}
.hero h1 em{font-style:normal;color:var(--brass-hi)}
.hero .lede{max-width:30rem;color:var(--parchment-dim);font-size:var(--step-1);line-height:1.5}
.letter{position:relative;width:100%;max-width:980px;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -20px #000c}
.letter img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 70%}
@media (min-width:700px){.letter img{aspect-ratio:16/9}}
.letter::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,transparent 45%,var(--night) 100%)}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;border:0;font:700 1rem var(--body);cursor:pointer;text-decoration:none}
.btn-gold{background:linear-gradient(var(--brass-hi),var(--brass));color:var(--ink);box-shadow:0 6px 20px -6px #f3d48a99}
.btn-ghost{background:transparent;color:var(--parchment);box-shadow:inset 0 0 0 2px var(--brass)}
.soon{font:700 .78rem var(--body);color:var(--parchment-dim);letter-spacing:.08em}

/* before / after */
.ba{position:relative;width:100%;max-width:720px;margin-inline:auto;aspect-ratio:4/3;border-radius:14px;overflow:hidden;touch-action:pan-y;box-shadow:0 30px 60px -24px #000d;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--cut,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:3px;margin-left:-1.5px;background:var(--brass-hi);box-shadow:0 0 18px var(--brass-hi);pointer-events:none}
.ba .handle::after{content:'';position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:var(--brass-hi);box-shadow:0 2px 10px #0008;background-image:linear-gradient(90deg,transparent 30%,var(--ink) 30% 36%,transparent 36% 64%,var(--ink) 64% 70%,transparent 70%)}
.ba .tag{position:absolute;bottom:12px;font:700 .72rem var(--body);letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:#0009;color:var(--parchment)}
.ba .tag.l{left:12px}.ba .tag.r{right:12px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.center{text-align:center;justify-items:center}
.muted{color:var(--parchment-dim)}

/* three steps: a real sequence */
.steps{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.step{display:grid;gap:12px;align-content:start}
.step img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.step .n{font:700 var(--step-2) var(--display);color:var(--brass)}
.step p{color:var(--parchment-dim)}

/* the five wings */
.wings{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.wing{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;display:grid;align-content:end;padding:14px;isolation:isolate}
.wing img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.wing::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 35%,#08191bf0)}
.wing .ico{width:40px;height:40px}
.wing h3{font-size:1.5rem}
.wing p{font-size:.9rem;color:var(--parchment-dim);line-height:1.4}

/* the people */
.people{display:grid;gap:22px 14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.person{display:grid;justify-items:center;text-align:center;gap:8px;margin:0}
.people .person:last-child:nth-child(odd){grid-column:1/-1}
.person img{height:180px;width:auto;object-fit:contain;filter:drop-shadow(0 10px 14px #000a)}
.person b{font:700 var(--step-1) var(--display);color:var(--brass-hi)}
.person q{font-size:.92rem;color:var(--parchment-dim);line-height:1.45}

/* secrets: chests and the diary */
.secret{display:grid;gap:26px;align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.chests{display:flex;justify-content:center;align-items:end;gap:6px}
.chests img{width:31%;filter:drop-shadow(0 12px 16px #000b)}
.chests img:nth-child(2){width:38%}
.diary{position:relative;padding:22px 22px 22px 96px;border-radius:6px;background:var(--parchment);color:var(--ink);box-shadow:0 20px 40px -16px #000c;transform:rotate(-1deg)}
.diary img{position:absolute;left:12px;top:50%;width:72px;margin-top:-36px}
.diary p{font:600 1.35rem/1.35 var(--display)}
.diary small{display:block;margin-top:8px;font:700 .75rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--wood)}

/* for everyone */
.promises{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.promises li{padding:18px;border-radius:12px;background:var(--night-2)}
.promises b{display:block;font:700 var(--step-1) var(--display);color:var(--brass-hi)}
.promises span{color:var(--parchment-dim);font-size:.95rem}

/* the closing: the museum at night */
.finale{position:relative;margin-inline:-16px;padding-inline:16px;text-align:center;justify-items:center;isolation:isolate;overflow:hidden;min-height:620px;align-content:end}
.finale img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;z-index:-2}
.finale::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 10%,#0d2527e6 52%,var(--night) 75%)}
.finale h2{font-size:var(--step-4)}
form.list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;max-width:440px}
form.list input{flex:1 1 220px;min-width:0;padding:14px 18px;border-radius:999px;border:2px solid var(--brass);background:#0008;color:var(--parchment);font:600 1rem var(--body)}
form.list input::placeholder{color:var(--parchment-dim)}
.thanks{color:var(--brass-hi);font-weight:700}
footer{padding-block:28px 40px;text-align:center;font-size:.85rem;color:var(--parchment-dim);display:grid;gap:8px}
footer nav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){.letter img{animation:breathe 14s ease-in-out infinite alternate}@keyframes breathe{to{transform:scale(1.06)}}}

/* The text pages (privacy, terms, support): one reading column on the museum's night colours. */
.doc-top{display:flex;justify-content:center;padding-top:28px}
.doc-logo{width:min(260px,60vw);height:auto}
.doc{max-width:44rem;margin:0 auto;padding:12px 0 40px;line-height:1.65}
.doc h1{font-family:var(--display);font-size:var(--step-3);color:var(--brass-hi);margin:24px 0 4px}
.doc h2{font-family:var(--display);font-size:var(--step-2);color:var(--brass-hi);margin:32px 0 6px}
.doc h3{font-size:var(--step-1);margin:20px 0 4px}
.doc p,.doc li{color:var(--parchment)}
.doc a{color:var(--brass-hi)}
.doc-meta{color:var(--parchment-dim);font-size:.9rem}
.doc hr{border:0;border-top:1px solid #d6a64a55;margin:48px 0 8px}
footer a{color:var(--parchment-dim)}