/* ===========================================================================
   coming.css
   The holding page.

   Deliberately built on tokens.css rather than on its own colours, and it
   keeps the maiolica wall, so when the full site comes back this page will
   have looked like a part of it rather than a placeholder from somewhere
   else. site.css is not loaded here: none of its page compositions apply and
   it is nine hundred lines the holding page would never use.
   =========================================================================== */

body.soon{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

.soon main,
main{
  flex:1;
  display:grid;
  grid-template-columns:1fr minmax(0,46%);
  /* stretch, not center. With align-items:center the tile column is only as
     tall as its (empty) content, so height:100% resolved against an auto row
     and tiles.js measured a zero height box and drew nothing. The text is
     centred individually instead. */
  align-items:stretch;
  min-height:calc(100svh - 84px);
  position:relative;
  overflow:hidden;
}

.soon-text{
  align-self:center;
  padding:var(--s8) var(--s6) var(--s8) max(var(--s7), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  max-width:none;
}
.soon-text h1{
  font-size:clamp(52px,8.4vw,116px);
  margin-top:var(--s3);
}
.soon-rule{
  border:0;
  border-top:2px solid var(--blue);
  margin:var(--s5) 0 var(--s4);
  max-width:120px;
}
.soon-text .lede{max-width:34ch}

.soon-flag{
  font-family:var(--mono);
  font-size:var(--t-meta);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:var(--s6);
}
.soon-mail{
  font-family:var(--display);
  font-size:clamp(22px,2.8vw,34px);
  line-height:1.15;
  margin-top:var(--s2);
}

/* The tile cell rules live in site.css, which this page does not load, so
   they are repeated here. Without them tiles.js builds the cells correctly
   and every one of them is an invisible zero-size box with no background. */
.tiles{overflow:hidden;pointer-events:none}
.tiles i{
  position:absolute;
  display:block;
  background:url("../assets/tile-field.webp?v=539033fe?v=539033fe") center / 100% 100% no-repeat;
}
@media (prefers-reduced-motion: no-preference){
  .tiles i{
    clip-path:inset(50% 50% 50% 50%);
    transition:clip-path 460ms var(--ease);
  }
  .tiles.is-set i{clip-path:inset(0 0 0 0)}
}

/* the wall fills the right hand column and bleeds off the edge */
.soon .tiles,
main > .tiles{
  --tile:260px;
  position:relative;   /* the cells inside are absolute, so this is their origin */
  top:auto;
  bottom:auto;
  left:auto;
  right:auto;
  align-self:stretch;
  min-height:100%;
  border-left:3px solid var(--blue);
}

.soon-foot{
  border-top:1px solid var(--rule-firm);
  padding:var(--s4) 0;
}
.soon-foot p{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}

@media (max-width:900px){
  main{
    grid-template-columns:1fr;
    min-height:0;
  }
  .soon-text{padding:var(--s7) var(--gutter) var(--s6)}
  .soon .tiles,
  main > .tiles{
    --tile:150px;
    height:170px;
    border-left:0;
    border-top:3px solid var(--blue);
  }
}