/* A quieter header, a more deliberate arrangement of the game artwork. */
.site-header {
  height:68px;
  border:0;
  border-radius:50px;
  background:transparent;
  box-shadow:none;
  padding:0 12px;
  backdrop-filter:none;
}
.site-header.scrolled {
  background:rgba(249,248,243,.87);
  backdrop-filter:blur(16px);
  box-shadow:none;
}
.brand {padding:7px 9px;}
.brand img {width:38px;height:36px;}
.desktop-nav {gap:34px;margin-right:33px;font-size:12px;}
.header-contact {font-size:11px;}
.hero {min-height:650px;padding-top:125px;}
.hero h1 {font-size:46px;line-height:1.12;letter-spacing:-1.9px;margin-bottom:24px;font-weight:600;}
.hero-word {position:relative;isolation:isolate;white-space:nowrap;}
.hero-word:after {content:"";position:absolute;left:0;right:-4px;bottom:1px;height:7px;background:#f4d35e;z-index:-1;transform:rotate(-2deg);border-radius:40% 65% 20% 60%;}
.hero-description {max-width:440px;margin:0 auto 27px;font-size:14px;line-height:1.85;}
.hero-coconut {width:160px;left:calc(50% - 570px);top:105px;rotate:-8deg;}
.hero-nut {position:absolute;width:65px;left:calc(50% - 425px);top:213px;transform:rotate(26deg);filter:drop-shadow(4px 9px 8px #1b3a221a);animation-delay:-2s;}
.hero-bottle {width:112px;right:calc(50% - 516px);top:118px;transform:rotate(13deg);}
.hero-gold {position:absolute;width:125px;left:calc(50% - 426px);top:394px;transform:rotate(-10deg);filter:drop-shadow(3px 12px 9px #69491d22);animation-delay:-5s;}
.hero-annotation {left:calc(50% - 536px);top:298px;font-size:12px;rotate:-5deg;}
.hero-paperclip {right:calc(50% - 560px);top:333px;z-index:3;width:15px;height:49px;rotate:-17deg;}
.hero-scrap {width:215px;right:calc(50% - 593px);top:374px;transform:rotate(9deg);z-index:2;}
.hero-scrap-back {position:absolute;width:203px;background:#fffdf5;padding:7px 7px 20px;right:calc(50% - 535px);top:325px;transform:rotate(-12deg);box-shadow:2px 5px 12px #1b3a2218;}
.hero-scrap-back img {aspect-ratio:1.8;object-fit:cover;}
.hero-project-tag {position:absolute;left:calc(50% - 417px);top:528px;font-size:7px;letter-spacing:.16em;color:#8b9584;rotate:-4deg;}
.hero-footnote {bottom:34px;}
.art-oil>img {object-position:50% 50%;}
.dialog-art.art-oil>img:first-child {object-position:50% 18%;}
.studio-leaf {width:310px;opacity:.93;filter:drop-shadow(8px 14px 9px #263e2220);}
.studio-leaf-left {left:calc(50% - 840px);top:-10px;rotate:30deg;transform:none;}
.studio-leaf-right {right:calc(50% - 850px);top:80px;rotate:-27deg;transform:scaleX(-1);}

/* The closing invitation belongs to the green canvas, with room around it. */
.contact-section {padding-top:81px;}
.footer-stage {padding-bottom:78px;}
.contact-card {width:min(600px,100%);padding:30px 38px 32px;border-radius:0;background:transparent;color:var(--cloud);box-shadow:none;}
.contact-card .eyebrow {color:#b9cbb2;font-size:9px;}
.contact-card h2 {font-size:32px;font-weight:500;margin-bottom:18px;}
.contact-card>p:not(.eyebrow) {font-size:13px;color:#d2ddcb;line-height:1.8;margin:0 auto 27px;max-width:370px;}
.contact-card .button {background:var(--cloud);color:var(--forest);border-color:var(--cloud);}
.contact-card .button:hover {background:#e8eedf;}
.email-link {font-size:14px;margin-top:26px;}
.copy-email {color:#b3c4aa;font-size:10px;}
.copy-email:hover {color:white;}
.name-badge {left:28px;top:75px;}
.footer-coconut {left:86px;top:165px;width:125px;}
.swan-postcard {right:0;top:95px;width:166px;}
.footer-can {right:110px;top:237px;width:77px;}

@media(max-width:1100px) {
  .hero-coconut {left:-17px;top:105px;width:140px;}
  .hero-nut {left:105px;top:209px;width:53px;}
  .hero-bottle {right:35px;top:110px;width:92px;}
  .hero-gold {left:93px;top:398px;width:105px;}
  .hero-annotation {left:28px;top:294px;font-size:11px;}
  .hero-scrap {right:-48px;top:396px;width:193px;}
  .hero-scrap-back {right:15px;top:348px;width:176px;}
  .hero-paperclip {right:40px;top:346px;}
  .hero-project-tag {left:89px;top:518px;font-size:6px;}
  .studio-leaf-left {left:-155px;}
  .studio-leaf-right {right:-170px;}
  .name-badge {left:0;}
  .footer-coconut {left:28px;}
  .swan-postcard {right:-8px;width:145px;}
  .footer-can {right:60px;}
}
@media(max-width:760px) {
  .site-header {height:58px;width:calc(100% - 38px);padding:0 6px;}
  .brand {padding:6px;}
  .brand img {width:34px;height:32px;}
  .desktop-nav {gap:25px;margin-right:25px;font-size:11px;}
  .hero {min-height:620px;padding-top:130px;}
  .hero h1 {font-size:41px;letter-spacing:-1.6px;}
  .hero-description {font-size:13px;max-width:390px;}
  .hero-coconut {width:105px;left:-20px;top:40px;}
  .hero-nut {left:66px;top:132px;width:43px;}
  .hero-bottle {width:75px;right:14px;top:52px;}
  .hero-gold {width:84px;left:38px;top:414px;}
  .hero-annotation {left:23px;top:332px;font-size:9px;}
  .hero-scrap {right:-38px;top:430px;width:158px;}
  .hero-scrap-back {right:19px;top:394px;width:148px;}
  .hero-paperclip {right:32px;top:392px;width:13px;height:43px;}
  .hero-project-tag {left:35px;top:515px;font-size:5px;}
  .studio-leaf {width:220px;}
  .studio-leaf-left {left:-140px;top:0;}
  .studio-leaf-right {right:-140px;top:125px;}
  .contact-card {width:min(480px,100%);padding:29px 40px 30px;}
  .contact-card h2 {font-size:30px;}
  .contact-card>p:not(.eyebrow) {font-size:12px;}
  .name-badge {left:-5px;top:-26px;}
  .footer-coconut {width:82px;left:0;top:233px;}
  .swan-postcard {width:110px;right:-10px;top:239px;z-index:1;}
  .footer-can {display:none;}
  .footer-stage {padding-bottom:85px;}
}
@media(max-width:520px) {
  .site-header {margin-top:15px;top:10px;}
  .brand img {width:33px;height:31px;}
  .desktop-nav {display:none;}
  .hero {padding:132px 23px 78px;min-height:624px;}
  .hero h1 {font-size:32px;letter-spacing:-1.3px;line-height:1.16;}
  .hero-description {font-size:12px;max-width:285px;line-height:1.85;}
  .hero-coconut {width:90px;left:-16px;top:31px;}
  .hero-nut {width:37px;left:66px;top:98px;}
  .hero-bottle {width:64px;right:12px;top:35px;}
  .hero-gold {width:76px;left:16px;top:436px;}
  .hero-annotation {top:367px;left:14px;font-size:8px;width:70px;}
  .hero-scrap {display:block;width:125px;right:0;top:435px;padding:5px 5px 20px;}
  .hero-scrap span {font-size:5px;left:8px;bottom:6px;}
  .hero-scrap-back {width:112px;right:47px;top:414px;padding:5px 5px 15px;}
  .hero-paperclip {width:10px;height:32px;right:31px;top:420px;border-width:1px;}
  .hero-project-tag {left:15px;top:524px;font-size:4.5px;letter-spacing:.09em;}
  .hero-footnote {font-size:8px;bottom:27px;}
  .games-section {padding-top:43px;}
  .studio-leaf {width:153px;}
  .studio-leaf-left {left:-105px;top:-4px;rotate:21deg;}
  .studio-leaf-right {right:-107px;top:153px;rotate:-20deg;}
  .contact-section {padding-top:71px;}
  .contact-card {max-width:100%;width:100%;padding:23px 9px 37px;}
  .contact-card h2 {font-size:29px;margin-bottom:18px;}
  .contact-card>p:not(.eyebrow) {font-size:12px;max-width:255px;}
  .contact-card .eyebrow {font-size:8px;}
  .name-badge {top:-48px;left:-5px;width:91px;height:65px;}
  .footer-coconut {width:62px;top:283px;left:-8px;}
  .swan-postcard {width:91px;top:303px;right:-9px;}
  .footer-stage {padding-bottom:104px;}
}
@media(max-width:360px) {
  .hero h1 {font-size:28px;letter-spacing:-1.1px;}
  .hero-description {max-width:254px;}
  .hero {min-height:619px;}
  .hero-scrap {width:108px;right:-6px;}
  .hero-scrap-back {width:102px;right:33px;}
}