/* Melly Labs — the manifest
 * =========================
 *
 * One screen, laid out the way the drawing has it: the words down the left, a
 * square high on the right, and a second picture running off the bottom corner.
 * The furniture (menu, star, chevrons, link) comes from start3.css; this file
 * only places what is particular to this page.
 *
 * Everything arrives rather than appears: the page builds itself up in the
 * order you would read it.
 */

/* start3.css holds the start page to one screen; this one runs on. */
body { height: auto; overflow-y: auto; overflow-x: hidden; }

main { position: relative; z-index: 10; display: block; }

/* The opening: the drawing, exactly one screen of it. */
.first { position: relative; height: 100vh; height: 100dvh; }

/* --- The words -------------------------------------------------------------
 * A rule under every line, all the same length, the way the homepage sets its
 * statement. Drawn as a repeating background rather than an underline, because
 * an underline stops at the last word and these must not.
 */
.intro {
  position: absolute; left: 10.2vw; top: 34vh;
  width: min(27vw, 520px);
  font-size: clamp(1.2rem, 1.55vw, 1.6rem); font-weight: 400;
  line-height: 1.62;
}
/* --- Ruled text -------------------------------------------------------------
 * A rule at the foot of every line, the full width of the column, on every
 * piece of writing on the page. Drawn as a repeating background rather than an
 * underline: an underline stops at the last word, and these must not. Each one
 * carries its own line height so the rules land on the baseline grid of that
 * block rather than one borrowed from another.
 */
.intro p, .block p {
  line-height: var(--lh);
  padding-bottom: 3px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--lh) - 2px),
    currentColor calc(var(--lh) - 2px),
    currentColor var(--lh)
  );
}
.intro p { --lh: 1.62em; }
.block p { --lh: 1.5em; }

/* Marked, not ruled, and only as wide as the word. */
.so { width: max-content; max-width: 100%; line-height: 1.5; }

.intro p + p { margin-top: 1.62em; }

/* The last line is marked rather than ruled: the studio green run behind the
   words like a marker pen, hugging the text instead of the column, so it stops
   where the sentence stops. */
.intro p.highlight { background-image: none; }
.intro p.highlight span {
  background-color: var(--green);
  padding: .06em .16em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* --- The pictures ----------------------------------------------------------
 * Black while there is nothing in them. Drop an <img> inside either one and it
 * fills the frame; nothing else moves.
 */
/* Waiting for photographs: a warm grey rather than black, so an empty frame
   reads as a gap to fill rather than as a black shape somebody chose. */
.shot { position: absolute; width: 100%; background: #e6e2dd; overflow: hidden; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.shot-one { left: 43.7vw; top: 16.4vh; width: 21vw; aspect-ratio: 4 / 5; }

/* The second one runs off the corner: the page continues past the window. */
.shot-two { left: 62.8vw; top: 71.8vh; width: 21vw; height: 40vh; }

/* --- Arriving ---------------------------------------------------------------
 * Each piece rises a little and fades in, in the order the page is read: the
 * menu, the first picture, the words, then the corner it runs off.
 */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

nav#menu, .star, .intro p, .shot, .dots, .out {
  animation: rise .9s cubic-bezier(.2, .7, .3, 1) backwards;
}
nav#menu { animation-delay: .05s; }
.star { animation-delay: .15s; }
.shot-one { animation-delay: .3s; }
.intro p:first-child { animation-delay: .5s; }
.intro p + p { animation-delay: .7s; }
.shot-two { animation-delay: .85s; }
.dots { animation-delay: 1s; }
.out { animation-delay: 1.05s; }

/* A page that moves on arrival is a page that can also simply be there. */
@media (prefers-reduced-motion: reduce) {
  nav#menu, .star, .intro p, .shot, .dots, .out { animation: none; }
}

@media (max-width: 760px) {
  /* On a phone the opening stops being a composition and becomes a column: the
     picture, a clear gap, then the words. Placing them absolutely left them
     touching, with the text starting the moment the picture ended. */
  .first {
    height: auto; min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center;
    gap: clamp(30px, 7vh, 70px);
    padding: 16vh var(--edge) 12vh;
  }
  .intro {
    position: relative; left: auto; right: auto; top: auto; bottom: auto;
    width: auto;
    font-size: clamp(1rem, 4.2vw, 1.2rem);
  }
  .shot-one {
    position: relative; left: auto; right: auto; top: auto;
    width: 62vw; margin-left: auto; aspect-ratio: 1;
  }
  /* The door, kept: on a phone it follows the words instead of bleeding off
     the corner, which is what made it meaningless at this width. */
  .shot-two {
    position: relative; left: auto; top: auto;
    display: block; width: 52vw; height: auto; aspect-ratio: 1;
    margin-right: auto;
  }
}

/* --- What follows -----------------------------------------------------------
 * The manifest, laid out the way the drawing has it: nothing centred, nothing
 * repeating, and one size of type throughout so the statements read as writing
 * rather than as headlines with captions under them. Only the last line is
 * larger, and only one statement is marked.
 */
.flow {
  position: relative; z-index: 10;
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 34px);
  row-gap: clamp(60px, 12vh, 150px);
  padding: clamp(70px, 14vh, 180px) var(--edge) clamp(90px, 18vh, 220px);
  align-items: start;
}

.block p {
  font-size: clamp(1.2rem, 1.55vw, 1.6rem); font-weight: 400;
  max-width: 34ch;
}
.block b { font-weight: 400; }

/* The one line that is marked rather than said, hugging the words. Named
   .marker, not .mark: start3.css gives .mark to the wordmark on the start page,
   at 103vw wide, and this page loads that stylesheet too. The marker
   changes with the ground: the bright green on paper, white on green, and a
   lighter blue on blue. A marker has to differ from what it is drawn on. */
.marker {
  background-color: var(--green);
  /* Padding on the sides only. Top and bottom padding on a line that is broken
     in two makes the second fragment sit low and start short, which is what was
     cutting into "the keys". The line height gives the marker its depth. */
  padding: 0 .16em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.marked { line-height: 1.45; }

/* Each marked line is a block of its own rather than a run of inline text. An
   inline run can be broken across lines, and a broken run is what leaves the
   first letters of the second line outside the colour. A block cannot break, so
   the marker always covers exactly its own words. */
.marked .marker { display: inline-block; }

/* Where each piece sits. */
.b1 { grid-column: 3 / span 5; }
.shot-b { grid-column: 1 / span 5; margin-left: calc(var(--edge) * -1); }
.b2 { grid-column: 7 / span 5; }
.b3 { grid-column: 5 / span 5; }
.shot-c { grid-column: 3 / span 4; }
.b4 { grid-column: 8 / span 5; align-self: center; }

/* In the flow the frames are ratio boxes: a height from aspect-ratio does not
   feed back into an auto-sized grid row, so the frame would overflow it and the
   next block would land on top. Percentage padding does. */
.flow .shot { position: relative; left: auto; top: auto; }
/* Sized to the pictures in them, so neither is cropped: mani_03 is 3:2 across
   five columns, mani_04 is 3:4 across four. */
.flow .shot-b { height: 25vw; }
.flow .shot-c { height: 39.5vw; }

/* The turn, and the end. */
.so {
  grid-column: 5 / span 3;
  font-size: clamp(1.2rem, 1.55vw, 1.6rem); font-weight: 400;
  margin-top: clamp(30px, 6vh, 80px);
}
/* The last line carries no rule: it is the end of the page, not another
   statement in it. */
.close {
  grid-column: 1 / -1; margin-inline: auto; line-height: 1.2;
  font-size: clamp(1.5rem, 2.6vw, 2.6rem); font-weight: 400;
  letter-spacing: -0.015em;
  margin-top: clamp(20px, 5vh, 60px);
}

/* Arriving on the way past. */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].seen {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 760px) {
  /* A phone is narrow, not simple. The same field, six columns instead of
     twelve, so the blocks still step across the page and the pictures still run
     off an edge rather than everything stacking down the middle. */
  .flow {
    grid-template-columns: repeat(6, 1fr);
    column-gap: 10px;
    row-gap: clamp(42px, 9vh, 90px);
    padding-top: clamp(60px, 12vh, 120px);
  }

  .block p { max-width: none; }

  .b1 { grid-column: 2 / span 5; }
  .b2 { grid-column: 1 / span 5; }
  .b3 { grid-column: 2 / span 5; }
  .b4 { grid-column: 1 / span 5; }

  /* One runs off the left, the other off the right. */
  .shot-b {
    grid-column: 1 / span 5; height: 60vw;
    margin-left: calc(var(--edge) * -1);
  }
  .shot-c {
    grid-column: 3 / span 4; height: 62vw;
    margin-right: calc(var(--edge) * -1);
  }

  .so { grid-column: 3 / span 4; }
  .close { grid-column: 1 / -1; font-size: clamp(1.35rem, 7vw, 2rem); }
}

/* A marked line stands on its own: no rule under it, and what it means follows
   underneath rather than running on from it, stepped in so the marked line
   keeps the left edge to itself. */
.block p.marked {
  background-image: none; padding-bottom: 0;
  margin-bottom: .9em;
  /* Larger than the rest, with the closing line: the two the page is built
     around. */
  font-size: clamp(1.45rem, 1.95vw, 2.05rem);
}
/* Stepped in with a margin, not padding: the rules are a background, and a
   background paints across padding, so padding would start every rule a step to
   the left of the words it belongs to. */
.block p.marked + p { margin-left: 1.6ch; }

/* The marker, per ground. */
body.on-green .marker, body.on-green .intro p.highlight span { background-color: #fff; }
body.on-blue .marker, body.on-blue .intro p.highlight span { background-color: #6a6aff; }