@font-face{font-family:Pinyon;src:url(fonts/PinyonScript.ttf) format("truetype");font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/Cormorant.ttf) format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:CormorantSC;src:url(fonts/CormorantSC.ttf) format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/Montserrat.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{--cream:rgb(245,241,234);--ink:rgb(95,70,54);--soft:rgb(128,103,84);--line:rgba(95,70,54,.24);--card:rgba(255,255,255,.42)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cream)}
body{color:var(--ink);font-family:Cormorant,Georgia,serif;font-size:18px;line-height:1.5;background:var(--cream) url(img/grain.png) repeat;background-size:256px;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:520px;margin:0 auto;padding:44px 22px calc(40px + env(safe-area-inset-bottom))}
.head{text-align:center}
.photo{position:relative;width:176px;margin:0 auto 22px}
.photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:88px 88px 3px 3px}
.photo:after{content:"";position:absolute;inset:-9px;border:1px solid var(--line);border-radius:97px 97px 4px 4px;pointer-events:none}
h1{font-family:Pinyon,cursive;font-weight:400;font-size:54px;line-height:1.1;margin:6px 0 6px}
.title{font-family:Montserrat,sans-serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:500}
.place{font-family:CormorantSC,serif;font-size:17px;letter-spacing:.18em;color:var(--soft);margin-top:4px}
.ig{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 14px;font-family:Montserrat,sans-serif;font-size:11px;letter-spacing:.14em;color:var(--soft);border-radius:40px;transition:color .2s}
.ig:hover{color:var(--ink)}
.ig svg{flex:none}
nav{margin-top:26px}
.list{list-style:none;display:flex;flex-direction:column;gap:12px}
.btn{display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 18px 12px 18px;background:var(--card);border:1px solid var(--line);border-radius:3px;transition:background .2s,border-color .2s,transform .2s}
.btn:hover{background:rgba(255,255,255,.7);border-color:rgba(95,70,54,.45);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.n{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:.15em;color:var(--soft);min-width:20px}
.t{flex:1;min-width:0;display:flex;flex-direction:column}
.t b{font-family:CormorantSC,serif;font-weight:500;font-size:21px;letter-spacing:.06em;line-height:1.2}
.t small{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-top:3px}
.arr{font-family:Cormorant,serif;font-size:22px;line-height:1;color:var(--soft);transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.foot{text-align:center;margin-top:36px}
.rule{width:48px;height:1px;background:var(--ink);opacity:.4;margin:0 auto 22px}
.sig{font-family:Pinyon,cursive;font-size:34px;line-height:1.1;margin-bottom:10px}
.mail{font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.08em;border-bottom:1px solid var(--line);padding-bottom:2px;word-break:break-all}
@media (min-width:768px){
 .wrap{padding-top:72px;max-width:560px}
 .photo{width:200px}
 .photo img{border-radius:100px 100px 3px 3px}
 .photo:after{border-radius:109px 109px 4px 4px}
 h1{font-size:68px}
 .btn{min-height:74px;padding:14px 22px}
 .t b{font-size:23px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
