:root{
  --cream:#fff3dc;
  --paper:#fff7e7;
  --ink:#482612;
  --green:#56613b;
  --muted:#715237;
  --line:#d8ad77;
  --sans:'Trebuchet MS',Arial,sans-serif;
  --friendly:'Comic Sans MS','Chalkboard SE','Trebuchet MS',sans-serif;
  --wood:#ae632f
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:16px/1.5 var(--sans);
  background-image:url('assets/paper-texture.svg')
}
a{
  color:inherit
}
button{
  font:inherit
}
img{
  display:block;
  max-width:100%;
  height:auto
}
figure,p,h1,h2,h3{
  margin:0
}
a,button,summary{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid #763d16;
  outline-offset:5px
}
.wrap{
  width:min(1220px,calc(100% - 100px));
  margin-inline:auto
}
.skip{
  position:absolute;
  top:-80px;
  left:16px;
  padding:12px;
  background:var(--paper);
  z-index:10
}
.skip:focus{
  top:12px
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:140px;
  gap:30px
}
.wordmark{
  display:inline-flex;
  flex-shrink:0
}
.wordmark img{
  width:315px;
  filter:drop-shadow(0 4px 2px #74351135)
}
.site-header nav{
  display:flex;
  align-items:center;
  padding:11px 13px;
  gap:0;
  border:5px solid #be8044;
  border-radius:24px;
  background:linear-gradient(#fff9e9,#ffe5b9);
  box-shadow:inset 0 0 0 2px #fff5d9,0 4px 3px #743f2260;
  position:relative
}
.site-header nav:after{
  content:'';
  position:absolute;
  inset:4px;
  border:1px dashed #c8955d;
  border-radius:14px;
  pointer-events:none
}
.site-header nav a{
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  padding:0 19px;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
  position:relative;
  z-index:1
}
.site-header nav a+a{
  border-left:1px solid #d5ab7d
}
.site-header nav a:hover{
  text-decoration:underline;
  text-underline-offset:4px
}
.site-header nav span{
  font-size:27px;
  color:#9e5424;
  line-height:1
}
.header-note img{
  width:25px
}
.welcome{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.6fr);
  gap:35px;
  align-items:start;
  padding:0 0 105px;
  min-height:550px
}
.invitation{
  text-align:center;
  padding:7px 0 0;
  position:relative
}
.eyebrow{
  display:none
}
h1{
  font:bold clamp(48px,5.9vw,82px)/1.05 var(--friendly);
  letter-spacing:-.04em;
  color:#763e1e;
  transform:rotate(-4deg);
  margin:0 auto 30px;
  width:fit-content;
  text-shadow:0 2px 0 #fff4d5
}
h1 em{
  font-style:normal
}
h1:after{
  content:'';
  display:block;
  border-bottom:4px solid #b87a3e;
  border-radius:50%;
  height:12px;
  transform:rotate(-2deg)
}
.intro{
  font:18px/1.45 var(--friendly);
  margin-bottom:22px
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:62px;
  padding:10px 28px;
  border:3px solid #efc58e;
  border-radius:20px;
  color:#fff8e9;
  background:linear-gradient(#cf8244,#a94f22);
  box-shadow:inset 0 0 0 1px #864316,inset 0 3px 4px #ffcf9670,0 4px 4px #66371355;
  font:bold 24px var(--friendly);
  text-decoration:none;
  position:relative
}
.button:after{
  content:'';
  position:absolute;
  inset:5px;
  border:1px dashed #e7b278;
  border-radius:12px;
  pointer-events:none
}
.button:hover{
  background:linear-gradient(#d88d4f,#b05b2c)
}
.button:active{
  transform:translateY(2px)
}
.launch-note{
  font-size:11px;
  max-width:230px;
  margin:10px auto 0;
  text-shadow:0 1px var(--paper)
}
.table-scene{
  min-width:0
}
.table-preview{
  scroll-margin-top:20px;
  padding:10px 10px 9px;
  border:3px solid #a65c2c;
  border-radius:33px;
  background:linear-gradient(0deg,#8d461c,#df9a50 6%,#9c5024 9%,#ce8843 94%,#edb974);
  box-shadow:inset 0 0 0 2px #f4bd75,inset 0 0 0 7px #a15b30,0 7px 6px #6b371b55;
  transform:rotate(.4deg)
}
.screenshot-button{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  position:relative;
  cursor:zoom-in;
  color:var(--ink);
  text-align:left
}
.screenshot-button img{
  width:100%
}
.board{
  border:2px solid #efc68b;
  border-radius:22px;
  overflow:hidden
}
.enlarge-label{
  position:absolute;
  bottom:12px;
  left:16px;
  background:#fff3dceF;
  padding:5px 10px;
  border:1px solid #ba8b59;
  border-radius:7px;
  font-size:10px
}
.table-preview>figcaption{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px 0;
  font-size:10px;
  color:#fff5d9
}
.table-preview>figcaption>span:last-child{
  font-size:9px;
  white-space:nowrap
}
.comfort-strip{
  width:min(1180px,calc(100% - 110px));
  margin:-9px auto 0;
  padding:5px;
  background:linear-gradient(#fff8e9,#ffe8c6);
  border:2px solid #d6a267;
  border-radius:23px;
  box-shadow:0 3px 4px #995b2b30;
  position:relative
}
.comfort-strip .wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:8px;
  border:1px dashed #ddaf7b;
  border-radius:16px
}
.comfort-strip span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 30px;
  font-size:14px;
  font-weight:bold;
  line-height:1.4
}
.comfort-strip span+span{
  border-left:1px solid #d6a674
}
.comfort-strip i{
  font-style:normal;
  font-size:28px;
  line-height:1;
  color:#ae642d
}
.comfort-strip span:last-child{
  font-style:italic;
  font-family:var(--friendly)
}
h2{
  font:bold 29px/1.3 var(--friendly);
  letter-spacing:-.04em
}
.puzzle-shelf{
  padding-block:28px 10px
}
.shelf-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px
}
.heading-icon{
  font-size:37px;
  vertical-align:middle;
  color:#b97132;
  text-shadow:1px 2px #85411e
}
.shelf-heading>p{
  font:italic 14px/1.4 var(--friendly);
  text-align:center
}
.picture-shelf{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px
}
.picture-card{
  padding:6px 6px 0;
  border:1px solid #d4ab78;
  background:linear-gradient(#fff8e9,#ffe5be);
  border-radius:15px;
  box-shadow:inset 0 0 0 2px #fff3d9,0 3px 2px #b6844d60;
  overflow:hidden
}
.picture-card .screenshot-button{
  border-radius:9px;
  overflow:hidden;
  aspect-ratio:1.45
}
.picture-card img{
  height:100%;
  object-fit:cover
}
.picture-tag{
  position:absolute;
  left:9px;
  bottom:9px;
  padding:5px 10px;
  border:1px solid #d5ab7a;
  background:#fff5df;
  border-radius:10px;
  font-size:11px;
  box-shadow:0 2px 3px #673e2835
}
.picture-card figcaption{
  padding:9px 5px 10px;
  font-size:12px;
  font-weight:bold;
  line-height:1.4
}
.picture-card .screenshot-button:hover img{
  filter:brightness(1.06)
}
.personal-card{
  padding:6px;
  background:var(--paper)
}
.personal-card .screenshot-button{
  height:100%;
  min-height:210px;
  background:radial-gradient(ellipse,#f3f0db,#e2e8cd);
  border:1px dashed #a0ae7b;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:7px
}
.photo-icon{
  font-size:48px;
  line-height:1;
  color:#71884a;
  transform:rotate(-7deg)
}
.photo-icon>span{
  display:none
}
.personal-card strong{
  font:bold 23px var(--friendly)
}
.personal-description{
  font-size:12px;
  line-height:1.3
}
.personal-card .picture-tag{
  position:static;
  background:linear-gradient(#fff3d6,#f2ca93);
  padding:5px 18px;
  font-size:13px;
  font-weight:bold
}
.personal-card figcaption{
  display:none
}
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.difficulty-menu{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:28px;
  padding:16px 25px;
  border:2px solid #bb8046;
  border-radius:19px;
  background:repeating-linear-gradient(1deg,#e9b47440 0 2px,#fff1d226 3px 5px),linear-gradient(90deg,#e9ad6b,#f7d198 40%,#e4a668);
  box-shadow:inset 0 0 0 3px #ffe3b1,0 4px 3px #8f502b40;
  position:relative
}
.difficulty-menu:before{
  content:'';
  position:absolute;
  inset:6px;
  border:1px dashed #b9824d;
  border-radius:13px;
  pointer-events:none
}
.difficulty-intro{
  flex:0 0 205px
}
.difficulty-intro h3{
  font:bold 23px var(--friendly)
}
.difficulty-intro p{
  font-size:12px
}
.difficulties{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  flex:1;
  list-style:none;
  padding:0;
  margin:0
}
.difficulties li{
  text-align:center;
  border-left:1px solid #be8a53;
  position:relative;
  padding-left:28px
}
.difficulties li:before{
  content:'✚';
  position:absolute;
  left:13px;
  top:3px;
  color:#83a544;
  font-size:40px;
  line-height:1;
  transform:rotate(-15deg);
  text-shadow:1px 2px 1px #69472d
}
.difficulties li:nth-child(2):before{
  color:#499bd1
}
.difficulties li:nth-child(3):before{
  color:#e37920
}
.difficulties li:nth-child(4):before{
  color:#aa6ad2
}
.difficulties strong{
  display:block;
  font:bold 30px/1.1 var(--friendly)
}
.difficulties span{
  font-size:13px
}
.biscuit-aside{
  padding:10px 14px;
  background:#fff0d3;
  border:1px dashed #c18e58;
  box-shadow:0 3px 4px #6b371b50;
  transform:rotate(-6deg);
  font:bold italic 16px/1.3 var(--friendly);
  text-align:center;
  border-radius:5px;
  flex-shrink:0
}
.biscuit-aside span{
  display:block;
  font:10px var(--sans);
  margin-top:4px
}
.shelf-note{
  font-size:10px;
  color:var(--muted);
  margin-top:12px;
  text-align:center
}
.good-to-know{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  padding-block:22px 20px
}
.comfort-copy h2{
  padding-left:65px;
  position:relative
}
.comfort-copy h2:before{
  content:'☕';
  position:absolute;
  left:0;
  top:4px;
  font-size:44px
}
.comfort-copy>p{
  font-size:13px;
  max-width:440px;
  margin-top:14px
}
.comfort-list{
  list-style:none;
  padding:0;
  font-size:13px;
  margin:13px 0
}
.comfort-list li{
  padding-left:27px;
  margin:5px 0;
  position:relative
}
.comfort-list li:before{
  content:'✓';
  position:absolute;
  left:0;
  font-size:21px;
  top:-6px;
  font-weight:bold;
  color:#63562d
}
.comfort-copy .desktop-note{
  font-size:11px;
  color:var(--muted)
}
.questions h3{
  display:flex;
  align-items:center;
  gap:10px;
  font:bold 20px var(--friendly);
  margin-bottom:14px
}
.questions details{
  border:1px solid #d6a875;
  border-radius:12px;
  background:linear-gradient(#fff8e8,#ffe5be);
  box-shadow:inset 0 0 0 2px #fff3df,0 3px 3px #a36b3540;
  margin-bottom:9px
}
summary{
  cursor:pointer;
  list-style:none;
  padding:7px 34px 7px 14px;
  font-size:13px;
  font-weight:bold;
  position:relative
}
summary::-webkit-details-marker{
  display:none
}
summary:after{
  content:'+';
  position:absolute;
  right:13px;
  top:0;
  font-size:24px;
  color:#854b28
}
details[open] summary:after{
  content:'−'
}
details p{
  padding:5px 15px 14px;
  font-size:12px;
  line-height:1.7
}
.closing{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:12px;
  padding:18px 0;
  border-top:1px solid #d9b78570
}
.closing>img{
  width:28px
}
.closing h2{
  font-size:20px
}
.closing p{
  font-size:11px;
  color:var(--muted)
}
.closing .button{
  margin-left:auto;
  min-height:43px;
  font-size:16px;
  padding:6px 18px;
  border-width:2px;
  border-radius:14px
}











dialog{
  padding:48px 10px 10px;
  border:2px solid var(--line);
  border-radius:16px;
  background:var(--cream);
  max-width:min(1300px,96vw);
  max-height:94vh;
  overflow:auto
}
dialog::backdrop{
  background:#302416e8
}
dialog>img{
  width:auto;
  max-width:100%;
  max-height:calc(94vh - 75px);
  object-fit:contain;
  margin:auto
}
.dialog-close{
  position:absolute;
  top:8px;
  right:12px;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  font-size:13px
}
body:has(dialog[open]){
  overflow:hidden
}
@media(min-width:1400px){

  .welcome{
    min-height:580px
  }
  .site-header{
    min-height:150px
  }
}
@media(max-width:1100px){
  .wrap{
    width:calc(100% - 60px)
  }
  .site-header{
    min-height:125px
  }
  .wordmark img{
    width:255px
  }
  .site-header nav a{
    padding:0 12px;
    font-size:12px
  }
  .site-header nav{
    padding:9px
  }
  .welcome{
    gap:22px;
    min-height:490px;
    padding-bottom:90px
  }

  h1{
    font-size:65px
  }
  .intro{
    font-size:16px
  }
  .button{
    font-size:21px;
    padding:10px 20px
  }
  .comfort-strip{
    width:calc(100% - 60px)
  }
  .comfort-strip span{
    padding:0 22px;
    font-size:12px
  }
  .picture-shelf{
    gap:14px
  }
  h2{
    font-size:25px
  }
  .personal-card strong{
    font-size:20px
  }
  .personal-card .screenshot-button{
    min-height:185px
  }
  .picture-card figcaption{
    font-size:11px
  }
  .difficulty-intro{
    flex-basis:175px
  }
  .difficulty-intro h3{
    font-size:20px
  }
  .difficulty-menu{
    padding:14px 18px;
    gap:14px
  }
  .difficulties li{
    padding-left:20px
  }
  .difficulties li:before{
    left:5px;
    font-size:32px
  }
  .difficulties strong{
    font-size:26px
  }
  .biscuit-aside{
    font-size:14px
  }
  .good-to-know{
    gap:35px
  }





}
@media(max-width:800px){
  .wrap{
    width:calc(100% - 36px)
  }
  .site-header{
    min-height:110px;
    gap:15px
  }
  .wordmark img{
    width:220px
  }
  .site-header nav a{
    font-size:11px;
    padding:0 10px
  }
  .site-header nav span{
    font-size:21px
  }
  .site-header nav .header-note{
    display:none
  }
  .welcome{
    grid-template-columns:.8fr 1.2fr;
    min-height:450px;
    gap:20px;
    padding-top:20px;
    padding-bottom:100px
  }
  h1{
    font-size:51px;
    margin-bottom:20px
  }
  .intro{
    font-size:14px
  }
  .button{
    font-size:17px;
    min-height:51px;
    padding:8px 15px;
    gap:10px
  }
  .launch-note{
    font-size:10px;
    max-width:180px
  }
  .table-preview{
    border-radius:23px;
    padding:7px
  }
  .board{
    border-radius:15px
  }
  .table-preview>figcaption{
    flex-direction:column;
    gap:1px;
    font-size:9px
  }
  .table-preview>figcaption>span:last-child{
    font-size:8px
  }

  .comfort-strip{
    width:calc(100% - 36px)
  }
  .comfort-strip span{
    padding:0 14px;
    font-size:11px;
    gap:6px
  }
  .comfort-strip i{
    font-size:22px
  }
  .comfort-strip img{
    width:22px
  }
  .shelf-heading h2{
    font-size:22px
  }
  .shelf-heading>p{
    font-size:12px
  }
  .picture-shelf{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .picture-card figcaption{
    font-size:12px
  }
  .personal-card .screenshot-button{
    min-height:205px
  }
  .difficulty-menu{
    flex-wrap:wrap
  }
  .difficulty-intro{
    flex-basis:100%;
    text-align:center
  }
  .difficulties{
    flex-basis:100%
  }
  .difficulties li:first-child{
    border:0
  }
  .difficulties li:before{
    left:20px
  }
  .biscuit-aside{
    display:none
  }
  .good-to-know{
    gap:25px
  }
  .comfort-copy h2{
    font-size:24px;
    padding-left:47px
  }
  .comfort-copy h2:before{
    font-size:34px
  }
  .questions h3{
    font-size:17px
  }








  .closing h2{
    font-size:17px
  }
  .closing .button{
    font-size:13px
  }
}
@media(max-width:580px){
  .site-header{
    min-height:100px;
    flex-direction:column;
    gap:7px;
    padding:12px 0
  }
  .wordmark img{
    width:235px
  }
  .site-header nav{
    border-width:3px;
    border-radius:15px;
    padding:7px 12px
  }
  .site-header nav:after{
    border-radius:9px
  }
  .site-header nav a{
    font-size:12px;
    padding:0 18px
  }
  .welcome{
    display:flex;
    flex-direction:column;
    gap:24px;
    padding-top:20px;
    padding-bottom:34px;
    min-height:0
  }
  .invitation{
    width:100%;
    padding-top:0
  }
  .invitation h1{
    font-size:52px;
    margin-bottom:15px
  }
  .invitation h1 br{
    display:none
  }
  .intro{
    font-size:16px;
    margin-bottom:15px
  }
  .intro br:last-child{
    display:none
  }
  .button{
    font-size:20px;
    padding:9px 23px;
    min-height:54px
  }
  .launch-note{
    max-width:none;
    font-size:11px
  }
  .table-scene{
    width:100%
  }

  .table-preview{
    transform:none
  }
  .table-preview>figcaption{
    font-size:10px
  }
  .enlarge-label{
    font-size:9px;
    bottom:9px;
    left:10px
  }
  .comfort-strip{
    margin:0 auto
  }
  .comfort-strip .wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 0;
    padding:10px 4px
  }
  .comfort-strip span{
    font-size:11px;
    padding:0 7px
  }
  .comfort-strip span:nth-child(3){
    border-left:0
  }
  .comfort-strip span:last-child{
    font-size:10px
  }
  .puzzle-shelf{
    padding-top:24px
  }
  .shelf-heading{
    display:block;
    margin-bottom:15px
  }
  .shelf-heading h2{
    font-size:25px;
    line-height:1.25
  }
  .heading-icon{
    font-size:30px
  }
  .shelf-heading>p{
    text-align:left;
    font-size:12px;
    margin-top:10px
  }
  .shelf-heading>p br{
    display:none
  }
  .picture-shelf{
    gap:12px
  }
  .picture-card .screenshot-button{
    aspect-ratio:1.1
  }
  .picture-tag{
    font-size:9px;
    padding:3px 5px;
    bottom:6px;
    left:5px;
    border-radius:6px
  }
  .picture-card figcaption{
    font-size:10px;
    padding:7px 2px
  }
  .personal-card .screenshot-button{
    min-height:0;
    aspect-ratio:auto
  }
  .personal-card strong{
    font-size:17px
  }
  .photo-icon{
    font-size:32px
  }
  .personal-description{
    font-size:10px
  }
  .personal-card .picture-tag{
    font-size:10px;
    padding:4px 8px
  }
  .difficulty-menu{
    margin-top:22px;
    padding:15px 10px;
    gap:15px
  }
  .difficulties strong{
    font-size:27px
  }
  .difficulties li{
    padding-left:0
  }
  .difficulties li:before{
    position:static;
    font-size:27px;
    display:block;
    margin-bottom:5px
  }
  .difficulties span{
    font-size:11px
  }
  .good-to-know{
    grid-template-columns:1fr;
    padding-top:22px;
    gap:26px
  }
  .comfort-copy h2{
    font-size:28px;
    padding-left:58px
  }
  .comfort-copy h2:before{
    font-size:42px
  }
  .comfort-copy>p{
    max-width:none
  }
  .questions h3{
    font-size:20px
  }
  .closing{
    flex-wrap:wrap;
    padding-bottom:0;
    gap:12px
  }
  .closing>div{
    flex:1
  }
  .closing h2{
    font-size:18px
  }
  .closing .button{
    margin-left:40px;
    font-size:15px
  }










}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    transition:none!important
  }
}
/* Illustrated finishing details. */
.welcome{
  padding-bottom:28px;
  min-height:0
}
.invitation .button{
  margin-left:65px
}
.invitation .launch-note{
  position:relative;
  left:32px
}
h1{
  font-size:clamp(48px,5.4vw,76px)
}
.heading-icon,.site-header nav a:first-child span{
  display:inline-block;
  width:37px;
  height:37px;
  vertical-align:middle;
  background:url('assets/puzzle-piece.svg') center/contain no-repeat;
  font-size:0;
  text-shadow:none
}
.site-header nav a:first-child span{
  width:25px;
  height:25px
}
.comfort-strip span:last-child i{
  display:inline-block;
  width:27px;
  height:27px;
  background:url('assets/puzzle-piece.svg') center/contain no-repeat;
  font-size:0
}
.difficulties li:before{
  content:'';
  width:39px;
  height:39px;
  mask:url('assets/puzzle-piece.svg') center/contain no-repeat;
  background:#83a544;
  filter:drop-shadow(1px 2px 1px #69472d)
}
.difficulties li:nth-child(2):before{
  background:#499bd1
}
.difficulties li:nth-child(3):before{
  background:#e37920
}
.difficulties li:nth-child(4):before{
  background:#aa6ad2
}
.photo-icon{
  display:block;
  width:51px;
  height:43px;
  background:url('assets/photo.svg') center/contain no-repeat;
  font-size:0
}


.comfort-strip img,.questions h3 img,.header-note img{
  filter:sepia(1) saturate(1.4) hue-rotate(340deg)
}
@media(min-width:1400px){
  .welcome{
    min-height:0
  }

}
@media(max-width:1100px){
  .invitation .button{
    margin-left:25px
  }
  .invitation .launch-note{
    left:12px
  }
  .welcome{
    padding-bottom:36px
  }
  .difficulties li:before{
    width:32px;
    height:32px
  }
}
@media(max-width:800px){
  .invitation .button{
    margin-left:0
  }
  .invitation .launch-note{
    left:0
  }
  h1{
    font-size:51px
  }
  .welcome{
    padding-bottom:85px;
    min-height:435px
  }

}
@media(max-width:580px){
  .welcome{
    min-height:0;
    padding-bottom:34px
  }
  .invitation h1{
    width:fit-content;
    font-size:48px
  }
  .invitation h1 br{
    display:block
  }
  .invitation h1:after{
    max-width:250px;
    margin:auto
  }
  .difficulties li:before{
    margin:0 auto 5px;
    width:29px;
    height:29px
  }
  .photo-icon{
    width:36px;
    height:32px
  }
  .closing>div{
    flex-basis:calc(100% - 50px)
  }
  .closing .button{
    margin-left:40px
  }


}
.site-header nav a:nth-child(2) span{
  display:inline-block;
  width:27px;
  height:27px;
  background:url('assets/mug.svg') center/contain no-repeat;
  font-size:0
}
.comfort-strip span:nth-child(2) i{
  display:inline-block;
  width:26px;
  height:26px;
  background:url('assets/leaf.svg') center/contain no-repeat;
  font-size:0
}



/* Keep decorative artwork tied to its section, rather than the viewport width. */
.hero-scene {
  position: relative;
  isolation: isolate;
}




/* Compose the cottage and credits around the same centred content area. */







/* Independent character artwork keeps Biscuit's native aspect ratio. */
.woodland-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('assets/woodland-setting.webp') center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.hero-biscuit {
  position: absolute;
  z-index: -1;
  left: max(0px, calc((100% - 1920px) / 2));
  bottom: 22px;
  width: clamp(260px, calc(41.6667vw - 280px), 520px);
  height: auto;
  pointer-events: none;
}
@media (max-width: 800px) {
  .hero-biscuit {
    display: block;
    left: 18px;
    bottom: 18px;
    width: clamp(230px, 34vw, 280px);
  }
  .welcome { padding-bottom: 230px; }
  .woodland-backdrop { background-size: cover; }
}

@media (min-width: 801px) and (max-width: 1200px) {
  .welcome { min-height: 550px; }
}

/* Studio credits share the invitation strip; the footer is all countryside. */
.closing {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 20px;
}
.closing > div { min-width: 0; }
.closing .project-credits { justify-self: end; }
.project-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.studio-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: bold;
}
.studio-credit img { width: 34px; height: 34px; }
.forge-credit {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.forge-credit:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('assets/footer-countryside-full.webp') center bottom / cover no-repeat;
  mask-image: linear-gradient(to bottom, transparent, #000 14%), linear-gradient(to right, #000 45%, #0007 100%);
  mask-composite: intersect;
  pointer-events: none;
}
.footer-foreground {
  display: block;
  width: min(46.4vw, 1000px);
  height: auto;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .footer-foreground { width: 50.4vw; }
  .closing {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px 18px;
  }
}
@media (max-width: 700px) {
  .footer-foreground { width: 100%; max-width: 700px; }
}
@media (max-width: 580px) {
  .closing { grid-template-columns: 28px minmax(0, 1fr); }
  .closing .project-credits { grid-column: 2; margin-block: 5px; }
}

/* On phones Biscuit gets his own place on the table beneath the preview. */
@media (max-width: 580px) {
  .welcome { padding-bottom: 20px; }
  .hero-biscuit {
    position: static;
    z-index: auto;
    width: min(82%, 290px);
    height: auto;
    align-self: center;
  }
}