/* The landing page. A white front with the headline and a card you can sign, then one flat block
   of colour per thing the product does. A marker travels the whole page as you scroll and draws
   one line through it. */

/* Departure Mono (Helena Zhang, SIL Open Font License) is a pixel face drawn on an 11 pixel grid,
   so it is only ever set at 11px or 22px, where every stroke lands on a whole pixel */
@font-face { font-family: 'Departure Mono'; src: url(/fonts/DepartureMono-Regular.woff2) format('woff2'); font-display: swap; }

.landing { position: relative; overflow-x: clip; }
.landing .meta { font: 11px/1.5 'Departure Mono', var(--mono); letter-spacing: 0.06em; }
.landing .ink-tools .link-button { font: 22px/1 'Departure Mono', var(--mono); text-transform: uppercase; text-decoration-line: none; }
.landing .ink-tools [aria-pressed='true'] { text-decoration-line: underline; }

/* the ruled line of facts at the top */
.ledger {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  margin: 0 var(--gutter);
  padding: 0.9rem 0;
  border-bottom: 1.5px solid var(--ink);
  color: var(--ink);
}
/* wide enough for "London 13:50:23" from the start, so the line does not shift when the clock starts */
.clock { min-width: 15ch; text-align: right; }
@media (max-width: 30rem) {
  .ledger span:nth-child(2) { display: none; }
}

/* ---- the front ---- */

.hero { position: relative; padding: clamp(2.5rem, 9vw, 7rem) var(--gutter) clamp(3.5rem, 9vw, 7rem); }
.hero h1 {
  font-size: clamp(4rem, 16.5vw, 15rem);
  letter-spacing: -0.055em;
  line-height: 0.84;
  margin-left: -0.04em;
  max-width: 9ch;
}
.hero .pen-stop { white-space: nowrap; }
.lede {
  margin-top: clamp(2.5rem, 5.5vw, 4.5rem);
  font-size: clamp(1.375rem, 3vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  max-width: 18ch;
}

/* the card you can sign. On a phone it lies over the pen and its line, which pass behind it.
   On a wide screen the line goes round it and the pen can be picked up over it. */
.try {
  position: relative;
  z-index: 4;
  margin-top: 2.5rem;
  padding: 1rem 1rem 0.5rem;
  background: var(--accent);
  rotate: -2deg;
}
/* a hard shadow, two drawn pixels deep */
.try { box-shadow: 6px 6px 0 #1a1432; }
.try .meta, .try .link-button { color: #1a1432; }
.try .ink-pad { background: transparent; border: 0; border-radius: 0; }
.try .pen-orange { fill: #fafafb; }
@media (min-width: 62rem) {
  .try {
    position: absolute;
    right: calc(var(--gutter) + 1rem);
    bottom: -3.5rem;
    width: min(34vw, 31rem);
    margin: 0;
    rotate: 3deg;
    z-index: 2;
    box-shadow: 8px 8px 0 #1a1432;
  }
}

/* ---- what it does, one block each, never twice from the same side ---- */

.block {
  position: relative;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: clamp(3.5rem, 10vw, 8rem) var(--gutter);
  background: var(--block);
  color: var(--on-block);
}
@media (max-width: 43.75rem) {
  /* room above the words for the object and the pen's loop round it */
  .block:not(.paper) { padding-top: 10.5rem; padding-right: calc(var(--gutter) + 0.5rem); }
}
.block h2 { font-size: clamp(2.75rem, 10.5vw, 8rem); letter-spacing: -0.045em; line-height: 0.92; max-width: 13ch; }
.block > p { font-size: clamp(1.1875rem, 2.1vw, 1.625rem); line-height: 1.4; max-width: 32ch; }
.block .meta { color: var(--on-block); }

.pink { --block: #fa3868; --on-block: #1a1432; }
.green { --block: #28c88b; --on-block: #1a1432; justify-items: end; text-align: right; }
/* a long headline is set narrower, so there is still an empty side for the pen */
.green h2 { max-width: 10ch; }
.blue { --block: #3f5cdc; --on-block: #fafafb; justify-items: center; text-align: center; }
.orange { --block: #fa8938; --on-block: #1a1432; justify-items: end; text-align: right; }
.paper { --block: #fafafb; --on-block: #1a1432; }

/* where one colour meets the next, the lower one rises into the upper in a chunky ordered dither */
.block::before, .foot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 48px;
  background: var(--block);
  -webkit-mask: url(/landing/dither-3.png) repeat-x;
  mask: url(/landing/dither-3.png) repeat-x;
}
@media (min-width: 62rem) {
  .block::before, .foot::before {
    height: 64px;
    -webkit-mask-image: url(/landing/dither-4.png);
    mask-image: url(/landing/dither-4.png);
  }
}

.pink h2 { rotate: -2deg; transform-origin: left; }
.blue h2 { rotate: 1.5deg; }

/* a word ringed with the pen */
.marked { position: relative; white-space: nowrap; }
/* centred on the word itself, so it holds whatever the line height or alignment */
.marked .ink { position: absolute; left: 50%; top: 52%; width: 170%; translate: -50% -50%; pointer-events: none; }
.blue .pen-ink { fill: #fafafb; }

.interest { display: grid; gap: 1rem; max-width: 30rem; justify-items: start; margin-top: 1.5rem; }
.interest .field { width: 100%; }
.interest-thanks { margin-top: 1.5rem; font-size: 1.25rem; font-weight: 600; }

.foot { position: relative; --block: #1a1432; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding: 2rem var(--gutter) 3rem; background: #1a1432; color: #a39fb8; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* the small objects: 32 drawn pixels across, on the same grid as the pen and its line */
.pixel-icon { position: absolute; left: 0; top: 0; z-index: 2; width: 96px; aspect-ratio: 1; image-rendering: pixelated; pointer-events: none; }
@media (min-width: 62rem) {
  .pixel-icon { width: 128px; }
}

/* the pen, its line and the objects are placed by script, and stay out of sight until they have been */
.landing:not(.is-ready) :is(.marker, .pixel-icon, .pen-line) { visibility: hidden; }

/* ---- the marker and its line ---- */

/* the line is drawn on a small canvas and shown large, so every pixel of it is a hard square */
.pen-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; image-rendering: pixelated; }
.marker {
  /* 42 pixels of pixel art, shown at three times its size on a phone and four times on a wide screen */
  --size: 126px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: var(--size);
  height: var(--size);
  background: url(/landing/marker.png) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
@media (min-width: 62rem) {
  .marker { --size: 168px; }
}
@media print {
  .pen-line, .marker, .try, .pixel-icon { display: none; }
}