/* The front door: four sleeves and the book scattered round the name, the words in a
   panel at the foot. Nothing here is shared with the other pages. */

@font-face {
  font-family: handwritten;
  src: url('/static/handwritten.ttf') format('truetype');
  font-display: swap;
}

html, body {
  height: 100%;
  margin: 0;
}

body.home {
  overflow: hidden;
  background: linear-gradient(61deg, #fffffd 36%, #fffce9 100%);
  color: #5c4f14;
  font: 1.25rem/1.6 handwritten, Georgia, serif;
}

.root {
  position: relative;
  height: 100%;
}

.landing {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* The name as it is lettered on the Heartleap sleeve, traced to an SVG and
   used as a mask, so the colour is set here and the words stay in the h1 for
   a screen reader and for search. 407:101 is the drawing's own proportion. */
.title {
  margin: 0;
  width: min(82vw, 30rem);
  aspect-ratio: 407 / 101;
  background-color: #cdb72e;
  -webkit-mask: url("/static/images/vashti-bunyan.svg") no-repeat center / contain;
  mask: url("/static/images/vashti-bunyan.svg") no-repeat center / contain;
  color: transparent;
  font-size: 1px;
  overflow: hidden;
}

.sub-title {
  margin: 0;
  color: #b09a25;
  font-size: 1.9rem;
}

.home-links {
  margin-top: 1.25rem;
}

.home-links a {
  display: inline-block;
  padding: 0.15em 1.2em;
  border: 1px solid #b09a25;
  border-radius: 999px;
  color: #7a6200;
  font-size: 1.3rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.home-links a:hover,
.home-links a:focus-visible {
  background: #7a6200;
  color: #fffffd;
}

.cover {
  position: absolute;
  padding: 5px;
  border-radius: 4px;
  box-shadow: 0 3px 18px -3px rgb(104 86 8 / 0.6);
  transition: all 0.2s ease-in-out;
}

.cover img {
  display: block;
  width: 360px;
  max-width: 100%;
  border-radius: 4px;
  opacity: 0.8;
}

.cover:hover img,
.cover:focus-visible img {
  opacity: 1;
}

.cover.one   { top: 0;      left: 30px;  transform: rotate(30deg);  background: linear-gradient(90deg,  #fffffd 36%, #fffce9 100%); }
.cover.two   { top: -80px;  left: 40%;   transform: rotate(10deg);  background: linear-gradient(180deg, #fffffd 36%, #fffce9 100%); }
.cover.three { top: -3px;   right: -10px; transform: rotate(-20deg); background: linear-gradient(260deg, #fffffd 36%, #fffce9 100%); }
.cover.four  { bottom: -3px; left: -10px; transform: rotate(-10deg); background: linear-gradient(90deg,  #fffffd 36%, #fffce9 100%); }
/* The book closes the crescent on the right: under Lookaftering, leaning the other way, narrower because it's a portrait. */
.cover.five  { top: calc(22% + 60px); right: 30px; transform: rotate(12deg);  background: linear-gradient(260deg, #fffffd 36%, #fffce9 100%); }
.cover.five img { width: 220px; }

.cover.one:hover   { top: 5px;   left: 35px; }
.cover.two:hover   { top: -75px; left: calc(40% - 5px); }
.cover.three:hover { top: 2px;   right: -5px; }
.cover.four:hover  { bottom: 2px; left: -5px; }
.cover.five:hover  { top: calc(22% + 65px); right: 25px; }

.content {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 65%;
  padding: 30px;
  box-sizing: border-box;
  background: linear-gradient(161deg, #fffffd 36%, #fffce9 100%);
  box-shadow: -3px -2px 5px -3px rgb(0 0 0 / 0.1);
  border-top-left-radius: 3px;
}

.content > :first-child { margin-top: 0; }
.content > :last-child { margin-bottom: 0; }

.content a {
  color: #7a6200;
  text-underline-offset: 0.15em;
}

.user-edit {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: 0.3em 0.9em;
  border: 2px solid #852f2f;
  border-radius: 4px;
  background: #fff;
  color: #852f2f;
  font-size: 0.9rem;
  text-decoration: none;
  text-transform: uppercase;
}

/* Between a phone and a wide screen the scatter has less room than 360px
   sleeves need, and they covered the name. The sleeves scale with the window,
   by its height too (a laptop is wide but short), and the name narrows a
   little, so the middle stays clear. At 1440 and up nothing changes. */
@media (min-width: 52.0625rem) {
  .landing { --sleeve: min(360px, 25vw, 38vh); }
  .cover img { width: var(--sleeve); }
  .cover.five img { width: calc(var(--sleeve) * 0.61); }
  .title { width: min(30rem, 50vw); }
}

/* If a sleeve still reaches the middle, the words stay on top of it */
.title, .sub-title, .home-links {
  position: relative;
  z-index: 1;
}

/* No words on the front page: no empty panel at its foot */
.content:not(:has(*)) { display: none; }

/* No room to scatter: the sleeves become a grid above the words */
@media (max-width: 52rem) {
  body.home {
    overflow: auto;
  }

  .root, .landing {
    height: auto;
  }

  .landing {
    display: grid;
    /* The sleeves keep their tilt in the grid, and a tilted corner pokes past its cell:
       8px past the page at 768 wide. Clip it rather than let the page scroll sideways. */
    overflow-x: clip;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    padding: 2rem 1.25rem 1rem;
  }

  .title, .sub-title, .home-links {
    grid-column: 1 / -1;
  }

  .title {
    justify-self: center;
  }

  .home-links {
    margin-top: 0;
    text-align: center;
  }

  /* Block, so the 5px padding stays inside the cell: inline, it poked 8px past the right edge at 768 */
  .cover, .cover:hover {
    display: block;
    position: static;
    box-sizing: border-box;
    transform: none;
  }

  .cover.one, .cover.two, .cover.three, .cover.four, .cover.five {
    inset: auto;
  }

  /* Fifth in a grid of two: the book takes the last row on its own, at sleeve width */
  .cover.five {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.625rem);
    box-sizing: border-box;
  }

  .cover img {
    width: 100%;
  }

  .content {
    position: static;
    width: auto;
    margin: 0 1.25rem 2rem;
    padding: 1.25rem;
    border-radius: 4px;
  }
}