@font-face{font-family:"Fell";src:url(/assets/fonts/fell.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Fell";src:url(/assets/fonts/fell-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(/assets/fonts/jost.woff2) format("woff2");font-weight:300 700;font-display:swap}

:root{
  --obsidian:#11110F;
  --bone:#E8E1D4;
  --espresso:#2B211B;
  --oxblood:#541F27;
  --olive:#4C5140;
  --brass:#9A8055;
  --brass-hi:#B89A68;
  --muted:#A69C8C;
  --line:rgba(232,225,212,.14);
  --serif:"Fell",Georgia,"Times New Roman",serif;
  --sans:"Jost","Futura","Century Gothic",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--bone);font-family:var(--serif);
  background-color:var(--obsidian);
  background-image:
    radial-gradient(120% 80% at 85% 10%,rgba(84,31,39,.38),transparent 60%),
    radial-gradient(90% 70% at 0% 100%,rgba(76,81,64,.30),transparent 62%),
    radial-gradient(60% 50% at 50% 50%,rgba(43,33,27,.55),transparent 75%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
::selection{background:var(--brass);color:var(--obsidian)}

.page{min-height:100vh;display:flex;flex-direction:column;max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}

.top{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.mark{font-family:var(--sans);font-weight:600;letter-spacing:.14em;font-size:15px}
.lang{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12px;letter-spacing:.18em;color:var(--muted)}
.lang button{background:none;border:0;padding:6px 4px;cursor:pointer;color:var(--muted);letter-spacing:inherit;border-bottom:1px solid transparent}
.lang button[aria-pressed="true"]{color:var(--bone);border-bottom-color:var(--brass)}
.lang button:hover{color:var(--bone)}

.main{flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(40px,7vh,88px) 0}

.logo{width:84px;height:84px;border-radius:50%;margin-bottom:36px;box-shadow:0 0 0 1px rgba(154,128,85,.35)}
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-hi);margin:0 0 18px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--brass)}
h1{font-weight:400;font-size:clamp(44px,6.4vw,84px);line-height:1;letter-spacing:-.01em;margin:0 0 28px}
.lead{font-size:clamp(19px,1.6vw,22px);line-height:1.5;max-width:34ch;margin:0 0 14px;color:var(--bone)}
.lead.soft{font-style:italic;color:var(--muted)}

.links{display:flex;flex-wrap:wrap;gap:12px;margin:40px 0 0}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:13px 20px;min-height:48px;
  font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--bone);border:1px solid rgba(232,225,212,.28);background:rgba(17,17,15,.35);
  transition:border-color .2s,background-color .2s,color .2s;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:focus-visible,.lang button:focus-visible,.copy:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}

.fallback{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);max-width:460px}
.fallback p{margin:0 0 10px;font-size:16px;color:var(--muted);font-style:italic}
.copyrow{display:flex;align-items:stretch;flex-wrap:wrap;gap:8px}
.copyrow code{
  font-family:var(--sans);font-size:15px;letter-spacing:.06em;padding:10px 14px;
  border:1px dashed rgba(154,128,85,.6);color:var(--bone);user-select:all;-webkit-user-select:all;word-break:break-all;
}
.copy{background:none;border:1px solid rgba(232,225,212,.28);padding:10px 16px;cursor:pointer;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.copy:hover{border-color:var(--bone)}
.status{min-height:1.4em;font-size:14px !important;color:var(--brass-hi) !important;margin:8px 0 0 !important}

.visual{margin:0;position:relative}
.visual figcaption{position:absolute;left:-14px;bottom:44px;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-hi)}

.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0 28px;border-top:1px solid var(--line);font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}


@media (max-width:860px){
  .main{grid-template-columns:1fr;gap:48px;padding-top:36px}
  .visual{max-width:440px;margin:0 auto;width:100%}
  .visual figcaption{display:none}
  .logo{width:72px;height:72px;margin-bottom:28px}
}
@media (max-width:420px){
  .links{flex-direction:column}
  .btn{justify-content:center}
}

/* ---------- buttons: brass sweep ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bone);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left}
.btn:hover,.btn:focus-visible{color:var(--obsidian);border-color:var(--bone)}
.btn svg{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.btn:hover svg{transform:rotate(-8deg) scale(1.12)}
.btn-brass{background:var(--brass);border-color:var(--brass);color:var(--obsidian)}
.btn-brass::before{background:var(--bone)}

/* ---------- visual: framed painting reveal ---------- */
.visual{margin:0;position:relative;perspective:1200px}
.frame{
  position:relative;overflow:hidden;border:1px solid rgba(154,128,85,.35);padding:10px;background:rgba(232,225,212,.04);
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;
}
.frame::after{ /* soft light that follows the tilt */
  content:"";position:absolute;inset:10px;pointer-events:none;
  background:radial-gradient(60% 45% at var(--lx,30%) var(--ly,20%),rgba(232,225,212,.16),transparent 70%);
  mix-blend-mode:soft-light;
}

/* ---------- grain ---------- */
.grain{position:fixed;inset:-50%;z-index:50;pointer-events:none;background:url(/assets/img/grain.png);opacity:.55;animation:grain 1.2s steps(6) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}

/* ---------- intro curtain ---------- */
.curtain{
  position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;gap:14px;
  background:var(--obsidian);pointer-events:none;
  animation:curtain-up 1s cubic-bezier(.77,0,.18,1) 1.9s forwards;
}
.curtain svg{width:132px;height:132px;position:absolute;left:50%;top:50%;margin:-96px 0 0 -66px}
.curtain circle{fill:none;stroke:var(--brass);stroke-width:1;stroke-dasharray:352;stroke-dashoffset:352;animation:draw 1.3s cubic-bezier(.6,0,.2,1) .15s forwards}
.curtain-mark{font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:.5em;padding-left:.5em;color:var(--bone);margin-top:-30px;opacity:0;animation:track 1.2s cubic-bezier(.2,.7,.2,1) .55s forwards}
.curtain-sub{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--brass-hi);opacity:0;animation:fadein .8s ease 1.05s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes track{from{opacity:0;letter-spacing:1.1em}to{opacity:1;letter-spacing:.5em}}
@keyframes fadein{to{opacity:1}}
@keyframes curtain-up{to{transform:translateY(-100%);visibility:hidden}}

/* ---------- page entrance (starts as the curtain lifts) ---------- */
:root{--in:2.3s}
.top,.foot{animation:fadein .9s ease var(--in) both;opacity:0}
.intro > *{animation:rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--in) + var(--d,0s))}
.intro > :nth-child(1){--d:0s}.intro > :nth-child(2){--d:.1s}.intro > :nth-child(3){--d:.15s}
.intro > :nth-child(4){--d:.45s}.intro > :nth-child(5){--d:.55s}.intro > :nth-child(6){--d:.7s}.intro > :nth-child(7){--d:.85s}
.intro > .logo{animation-name:spin-in}
h1 .w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(2deg);animation:word .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--in) + .2s + var(--i) * 90ms)}
h1.split{animation:none;opacity:1}
.eyebrow::before{transform:scaleX(0);transform-origin:left;animation:line .9s cubic-bezier(.7,0,.2,1) calc(var(--in) + .3s) forwards}
.frame{clip-path:inset(100% 0 0 0);animation:unveil 1.5s cubic-bezier(.77,0,.18,1) calc(var(--in) - .2s) forwards}
.stage{transform:scale(1.12);animation:settle 2.6s cubic-bezier(.2,.7,.2,1) calc(var(--in) - .2s) forwards}
.visual figcaption{opacity:0;animation:fadein 1s ease calc(var(--in) + 1.2s) forwards}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes word{to{opacity:1;transform:none}}
@keyframes line{to{transform:scaleX(1)}}
@keyframes spin-in{from{opacity:0;transform:rotate(-90deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes unveil{to{clip-path:inset(0 0 0 0)}}
@keyframes settle{to{transform:none}}

/* return visit in same session: short intro */
.seen{--in:.15s}
.seen .curtain{display:none}

@media (prefers-reduced-motion:reduce){
  .curtain,.grain{display:none}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .top,.foot,.intro > *,h1 .w,.visual figcaption{opacity:1 !important;transform:none !important}
  .frame{clip-path:none !important;transform:none !important}
  .stage,.slide img{transform:none !important}
  .eyebrow::before{transform:none !important}
}

/* ---------- slideshow: a different reveal per switch ---------- */
.stage{position:relative;aspect-ratio:880/1201;overflow:hidden;background:var(--espresso)}
.slide{position:absolute;inset:0;visibility:hidden;z-index:0}
.slide.is-prev{visibility:visible;z-index:1}
.slide.is-active{visibility:visible;z-index:2}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02);transform:scale(1.07);transition:transform 9s cubic-bezier(.2,.6,.3,1)}
.slide.is-active img{transform:scale(1)}
/* whole image visible on a blurred bed of itself (collages, board, cards) */
.slide-contain img:not(.bg){object-fit:contain;padding:6%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.slide-contain .bg{filter:blur(28px) brightness(.45) saturate(.9);transform:scale(1.25) !important}

/* iris: opens as a circle from the centre, like the logo ring */
.fx-iris{animation:fx-iris 1.7s cubic-bezier(.7,0,.2,1) both}
@keyframes fx-iris{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(80% at 50% 50%)}}
/* brush: a slanted paint stroke sweeps across */
.fx-brush{animation:fx-brush 1.6s cubic-bezier(.77,0,.18,1) both}
@keyframes fx-brush{from{clip-path:polygon(0 0,0 0,-35% 100%,-35% 100%)}to{clip-path:polygon(0 0,135% 0,100% 100%,-35% 100%)}}
/* shutter: opens out from a horizontal line */
.fx-shutter{animation:fx-shutter 1.4s cubic-bezier(.86,0,.07,1) both}
@keyframes fx-shutter{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0 0 0 0)}}
/* develop: overexposed and soft, then sharpens like a print in the darkroom */
.fx-develop{animation:fx-develop 1.7s ease-out both}
@keyframes fx-develop{from{opacity:0;filter:blur(14px) brightness(1.9) sepia(.7)}55%{opacity:1}to{opacity:1;filter:none}}
/* canvas: unveiled bottom to top, like the intro */
.fx-canvas{animation:fx-canvas 1.5s cubic-bezier(.77,0,.18,1) both}
@keyframes fx-canvas{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.foot span:last-child{text-transform:none;letter-spacing:.08em}

/* =========================================================
   Letter dialog: write Joo.Form a letter, seal it, send it
   ========================================================= */
.letter{border:0;padding:0;background:transparent;color:var(--obsidian);width:min(560px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 24px);overflow:visible}
.letter::backdrop{background:rgba(17,17,15,.74);backdrop-filter:blur(3px)}
.letter[open]{animation:fadein .25s ease}
.paper,.sent{
  position:relative;background:#EFE8DA;color:#17191E;padding:44px 40px 30px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.4) inset;
  outline:1px solid rgba(154,128,85,.55);outline-offset:-12px;transform:rotate(-.5deg);
  max-height:calc(100dvh - 24px);overflow:auto;
}
.paper::before,.sent::before{content:"";position:absolute;inset:0;background:url(/assets/img/grain.png);opacity:.45;mix-blend-mode:multiply;pointer-events:none}
.letter[open] .paper{transform-origin:50% 0;animation:unfold .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes unfold{
  0%{opacity:0;transform:perspective(1400px) rotateX(-78deg) translateY(30px) scaleY(.55) rotate(-.5deg)}
  60%{opacity:1}
  100%{opacity:1;transform:perspective(1400px) rotateX(0) rotate(-.5deg)}
}
.letter .close{position:absolute;right:18px;top:14px;width:40px;height:40px;border:0;background:none;font-size:28px;line-height:1;color:#5b554b;cursor:pointer}
.letter .close:hover{color:var(--oxblood)}
.l-kicker{font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#8a7048;margin:0 0 10px}
.letter h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,6vw,40px);line-height:1.05;margin:0 0 22px}
.l-dear{font-family:var(--serif);font-style:italic;font-size:20px;margin:0 0 6px}
.line{display:block;margin:0 0 18px;position:relative}
.line span{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#7a7266;margin-bottom:2px}
.line input,.line textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(23,25,30,.35);border-radius:0;padding:6px 0;font-family:var(--serif);font-size:20px;color:#17191E;caret-color:var(--oxblood)}
.line textarea{border-bottom:0;resize:vertical;min-height:160px;line-height:32px;padding:0;
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(23,25,30,.22) 31px 32px);background-attachment:local}
.line input:focus,.line textarea:focus{outline:none;border-bottom-color:#9A8055}
.line textarea:focus{background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(154,128,85,.55) 31px 32px)}
.line input:user-invalid{border-bottom-color:var(--oxblood)}
.sign{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hp{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden}
.l-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.l-status{margin:0;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--oxblood);flex:1}
.seal{display:flex;align-items:center;gap:14px;background:none;border:0;cursor:pointer;padding:0;font:inherit;color:#17191E}
.seal-in{width:76px;height:76px;flex:none;display:grid;place-items:center;font-family:var(--serif);font-size:38px;color:#E9CFC2;
  border-radius:47% 53% 50% 48% / 52% 46% 54% 48%;
  background:radial-gradient(circle at 35% 30%,#8a3440,#541F27 55%,#3a141a);
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.18),inset 0 0 0 9px rgba(255,255,255,.06),0 6px 14px rgba(84,31,39,.45);
  text-shadow:0 1px 0 rgba(0,0,0,.45),0 -1px 0 rgba(255,255,255,.15);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.seal-label{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.seal:hover .seal-in{transform:rotate(-10deg) scale(1.06)}
.seal:active .seal-in{transform:scale(.92)}
.seal:focus-visible{outline:2px solid #9A8055;outline-offset:6px}
.seal[disabled]{cursor:wait}
.seal[disabled] .seal-in{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.94)}}
.l-alt{margin:22px 0 0;padding-top:16px;border-top:1px dashed rgba(23,25,30,.25);font-family:var(--serif);font-size:15px;color:#4a453d;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.l-alt code{font-family:var(--sans);font-size:14px;letter-spacing:.04em;color:#17191E;user-select:all;-webkit-user-select:all}
.letter .copy{color:#17191E;border-color:rgba(23,25,30,.4);padding:6px 12px;font-size:11px}
.letter .copy:hover{border-color:#17191E}
.l-alt.flash{animation:flash 1.2s ease}
@keyframes flash{30%{background:rgba(154,128,85,.25)}}

/* sending ritual: fold -> envelope -> wax seal -> fly away */
.envelope{display:none;position:absolute;left:50%;top:50%;width:240px;height:150px;margin:-75px 0 0 -120px;background:#E2D8C6;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.6);z-index:3}
.envelope::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49.6%,rgba(0,0,0,.08) 50%),linear-gradient(to top left,transparent 49.6%,rgba(0,0,0,.08) 50%)}
.envelope .flap{position:absolute;left:0;right:0;top:0;height:92px;background:#D8CCB6;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transform:rotateX(180deg);transition:transform .45s cubic-bezier(.6,0,.3,1)}
.envelope .seal-stamp{position:absolute;left:50%;top:72px;width:46px;height:46px;margin-left:-23px;display:grid;place-items:center;border-radius:48% 52% 50% 49%;
  background:radial-gradient(circle at 35% 30%,#8a3440,#541F27 60%,#3a141a);color:#E9CFC2;font-family:var(--serif);font-size:24px;transform:scale(0);opacity:0}
.letter.folding .paper{animation:fold-away .75s cubic-bezier(.6,0,.3,1) forwards}
@keyframes fold-away{
  0%{transform:rotate(-.5deg)}
  45%{transform:perspective(1200px) rotateX(55deg) scale(.7)}
  100%{transform:perspective(1200px) rotateX(85deg) scale(.32) translateY(40px);opacity:0}
}
.letter.folding .envelope,.letter.sealed .envelope,.letter.flying .envelope{display:block;animation:fadein .3s ease .35s both}
.letter.sealed .envelope .flap,.letter.flying .envelope .flap{transform:rotateX(0)}
.letter.sealed .seal-stamp,.letter.flying .seal-stamp{animation:stamp .45s cubic-bezier(.2,1.6,.4,1) .35s forwards}
@keyframes stamp{0%{transform:scale(2.6);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
.letter.flying .envelope{animation:fly 1s cubic-bezier(.6,0,.4,1) forwards}
@keyframes fly{0%{transform:none;opacity:1}25%{transform:translateY(12px) rotate(2deg)}100%{transform:translate(40vw,-80vh) rotate(-24deg) scale(.5);opacity:0}}
.letter.folding .paper,.letter.sealed .paper,.letter.flying .paper{pointer-events:none}
.letter.sealed .paper,.letter.flying .paper{opacity:0}
.sent{text-align:center;animation:unfold .8s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 0}
.sent .sent-title{font-family:var(--serif);font-size:clamp(28px,5vw,36px);line-height:1.1;margin:0 0 12px}
.sent p{font-family:var(--serif);font-size:18px;margin:0 0 22px;position:relative}
.sent .btn{color:#17191E;border-color:rgba(23,25,30,.4);background:transparent;position:relative}

@media (max-width:560px){
  .paper,.sent{padding:38px 22px 24px;transform:none}
  .sign{grid-template-columns:1fr;gap:0}
  .l-foot{flex-direction:column-reverse;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .letter[open] .paper,.sent{animation:none}
  .envelope{display:none !important}
}