@font-face{font-family:"Les Memoires";src:url(assets/fonts/lesmemoires-bold-webfont.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"The Minimalist";src:url(assets/fonts/theminimalist-regular-webfont.woff2) format("woff2");font-display:swap}

:root{
  --cream:#F6F0E4;--espresso:#2F2924;--butter:#F3E1A0;--sage:#A8B89C;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{color-scheme:only light;-webkit-text-size-adjust:100%;scrollbar-color:var(--sage) var(--cream)}
body{margin:0;background:var(--cream);color:var(--espresso);font:21px/1.3 "The Minimalist","Bradley Hand",cursive;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
h1,h2,p,ul{margin:0;padding:0}
ul{list-style:none}
b{font-weight:700}
::selection{background:var(--butter);color:var(--espresso)}
:focus-visible{outline:3px solid var(--espresso);outline-offset:3px;border-radius:14px}

/* the top: stripes painted by hand, a wavy paper name card on them */
.hero{position:relative;isolation:isolate;padding:30px 24px 0}
.paint{position:absolute;inset:0 0 -40px;z-index:-1;background:url(assets/patterns/painted-stripes-sage.svg) 0 0/240px 360px}
.js .paint{animation:paint 1.5s var(--ease) both}
@keyframes paint{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

.sign{position:relative;width:min(327px,100%);margin:0 auto;padding:30px 24px 46px;text-align:center;background:url(assets/patterns/frame-wavy-cream.svg) center/100% 100% no-repeat}
h1{font:700 42px/1.05 "Les Memoires",serif}
h1 img{margin:-8px auto}
.role{margin-top:4px}
.role span{display:block}
.flank{position:absolute}
.flank-l{left:-20px;top:-18px;transform:rotate(-10deg);width:58px}
.flank-r{right:-16px;top:-24px;transform:rotate(8deg);width:42px}

.work{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(306px,86%);height:80px;margin:-36px auto 0;padding:11px 7px 6px;border-radius:28px;background:url(assets/patterns/pill-ink.svg) center/100% 100% no-repeat border-box,content-box var(--espresso);color:var(--cream);font:700 31px/1 "Les Memoires",serif;transition:transform .5s var(--ease)}
.work:active{transform:scale(.97)}
.work span{margin-top:2px;font:21px/1 "The Minimalist","Bradley Hand",cursive}

/* the portfolio hangs from the main button on a string and swings by itself, so phones see it move too */
.folio{position:relative;display:flex;align-items:center;justify-content:center;width:min(306px,86%);height:80px;margin:16px auto 0;background:url(assets/patterns/pill-butter.svg) center/100% 100% no-repeat;font:700 31px/1 "Les Memoires",serif;transform-origin:50% -16px;filter:drop-shadow(0 5px 7px rgba(47,41,36,.2));transition:transform .5s var(--ease)}
.folio::before{content:"";position:absolute;left:50%;top:-18px;width:2px;height:22px;margin-left:-1px;background:var(--espresso)}
.folio::after{content:"";position:absolute;left:50%;top:4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 2px var(--espresso)}
.folio:active{transform:scale(.97)}
.folio.in{animation:breeze 5.6s ease-in-out 1.2s infinite}
@keyframes breeze{0%,76%,100%{rotate:0deg}8%{rotate:3.4deg}20%{rotate:-2.8deg}32%{rotate:2.2deg}44%{rotate:-1.5deg}56%{rotate:.9deg}66%{rotate:-.4deg}}

/* the doodles are the menu */
.menu{position:relative;margin-top:26px;padding:24px 12px 30px;background:var(--sage)}
.menu::before{content:"";position:absolute;top:-13px;left:0;right:0;height:14px;background:radial-gradient(circle at 14px 14px,var(--sage) 13.6px,transparent 14px) 0 0/28px 14px repeat-x}
.menu ul{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px;margin:0 auto}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:178px;height:100%;padding:16px 6px 14px;text-align:center;background:url(assets/patterns/frame-wavy-line-1.svg) center/100% 100% no-repeat;transition:transform .5s var(--ease)}
.t2{background-image:url(assets/patterns/frame-wavy-line-2.svg)}
.tile .doodle{height:70px;width:auto;max-width:112px;object-fit:contain;margin-bottom:6px;transform-origin:50% 90%}
.tile b{max-width:5.2em;font:700 26px/1.02 "Les Memoires",serif}
.tile:active{transform:scale(.97)}
.in .doodle{animation:tilt 3.4s ease-in-out infinite}
.in li:nth-child(2) .doodle{animation-delay:-1.3s}
@keyframes tilt{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}

/* what she makes, set out like the schedule on the wedding page */
.make{position:relative;z-index:1;padding:44px 16px 50px;background:var(--cream);text-align:center}
.make::before{content:"";position:absolute;top:-13px;left:0;right:0;height:14px;background:radial-gradient(circle at 14px 14px,var(--cream) 13.6px,transparent 14px) 0 0/28px 14px repeat-x}
.make::after{content:"";position:absolute;bottom:-13px;left:0;right:0;height:14px;background:radial-gradient(circle at 14px 0,var(--cream) 13.6px,transparent 14px) 0 0/28px 14px repeat-x}
h2{font:700 42px/1.02 "Les Memoires",serif;text-wrap:balance}
.lede{max-width:34ch;margin:12px auto 0;text-wrap:pretty}
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 4px;max-width:640px;margin:28px auto 0}
.row li{width:32%;min-width:104px;display:flex;flex-direction:column;align-items:center;gap:6px}
.row img{height:82px;width:auto}
.row span{max-width:4.9em}

/* the end of the page sits on the same painted stripes as the top */
.finale{position:relative;isolation:isolate}
.paint-low{inset:0;animation:none!important}

/* her favorites, on tags hanging from a rail */
.tags{position:relative;padding:46px 14px 62px;text-align:center}
.tags h2{display:inline-block;padding:15px 28px 17px;background:url(assets/patterns/frame-wavy-cream.svg) center/100% 100% no-repeat}
.hang{position:relative;max-width:420px;margin:26px auto 0;padding-top:24px}
.hang::before{content:"";position:absolute;top:0;left:50%;width:100vw;margin-left:-50vw;height:3px;background:var(--espresso)}
.hang ul{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tag{position:relative;display:block;height:100%;transform-origin:50% -24px;filter:drop-shadow(0 5px 7px rgba(47,41,36,.2));transition:transform .7s var(--ease)}
.tag::before{content:"";position:absolute;left:50%;top:-24px;width:2px;height:40px;margin-left:-1px;background:var(--espresso);z-index:1}
.hang li:nth-child(1) .tag{rotate:1.6deg}
.hang li:nth-child(2) .tag{rotate:-1.4deg}
.in li .tag{animation:swing 4.6s ease-in-out infinite}
.in li:nth-child(2) .tag{animation-delay:-.7s}
@keyframes swing{0%,100%{rotate:-1.8deg}50%{rotate:1.8deg}}
.tag:active{transform:scale(.98)}
.paper{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:222px;height:100%;padding:34px 6px 16px;background:var(--cream);clip-path:polygon(24% 0,76% 0,100% 14%,100% 100%,0 100%,0 14%)}
.paper::before{content:"";position:absolute;top:9px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;box-shadow:0 0 0 2px var(--espresso)}
.paper img{height:62px;width:auto;margin-bottom:6px}
.paper b{font:700 26px/1.02 "Les Memoires",serif;text-wrap:balance}

/* the rooftops ending */
footer{position:relative;padding:36px 22px 34px;background:var(--espresso);color:var(--cream);text-align:center}
footer::before{content:"";position:absolute;top:-13px;left:0;right:0;height:14px;background:radial-gradient(circle at 14px 14px,var(--espresso) 13.6px,transparent 14px) 0 0/28px 14px repeat-x}
footer>img{width:150px;margin:0 auto 8px}
.bye{color:var(--butter);font:700 31px/1 "Les Memoires",serif}
.bye img{margin:-8px auto 0}
.mail{display:inline-block;margin-top:4px;padding:10px 6px;text-decoration:underline wavy var(--butter) 1px;text-underline-offset:5px}
footer :focus-visible{outline-color:var(--cream)}
.fine{max-width:32ch;margin:8px auto 0;line-height:1.4;text-wrap:pretty}

/* a press answers right away, and only a mouse gets the hover lift */
.work:active,.folio:active,.tile:active,.tag:active{transition-duration:.1s}
@media (hover:hover){
  .work:hover{transform:translateY(-2px) rotate(-.6deg)}
  .folio:hover{transform:translateY(-2px)}
  .tile:hover{transform:translateY(-2px)}
}

@media (min-width:760px){
  .hero{padding-top:44px}
  .lede{max-width:44ch}
  .row{max-width:840px}
  .row li{width:19%}
  .row span{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before{animation:none!important;transition:none!important}
}