/* byfuente.com
   Everything is white. The only things with colour are the fountain and the water.
   No gradients, no rounded corners, no soft shadows, no transitions. */

@font-face {
  font-family: "Silkscreen";
  src: url("assets/fonts/silkscreen-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("assets/fonts/silkscreen-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --px: 6px;                              /* one art pixel */
  --line: 2px;                            /* hard rules */
  --ink: #000000;
  --stone-dark: #555555;
  --water-dark: #0000aa;
  --water-mid: #5555ff;
  --water-light: #55ffff;
  --stream-w: calc(var(--px) * 4);        /* the stream is 4 art pixels wide */
  --branch: calc(var(--px) * 10);         /* the spur from the stream to a card */
  --gutter: calc(var(--stream-w) + var(--branch) * 2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: #ffffff; }

body {
  color: var(--ink);
  font-family: "Silkscreen", "Small Fonts", "MS Sans Serif", monospace;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  -webkit-text-size-adjust: 100%;
}

img, canvas { image-rendering: pixelated; }

/* ---------- page shell ---------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ---------- sprites (drawn as box-shadow pixels) ---------- */

.sprite { position: relative; display: block; }
.sprite > i { position: absolute; top: 0; display: block; background: transparent; }

/* ---------- head ---------- */

.head { text-align: center; padding-top: calc(var(--px) * 8); }

.head__title { font-size: 16px; line-height: 0; }
.head__mark { margin: 0 auto; }

/* the name is a hand drawn sprite, so keep the real text for readers and search */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.head__tag {
  color: var(--stone-dark);
  margin-top: calc(var(--px) * 3);
  margin-bottom: calc(var(--px) * 6);
}

.head__fountain { margin: 0 auto; }

/* ---------- the stream ---------- */

/* Always at least a short run of water, so that on a very short window the fountain
   never ends up sitting directly on the pool. */
.flow { position: relative; flex: 1 0 auto; min-height: calc(var(--px) * 22); }

.stream {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--stream-w);
  margin-left: calc(var(--stream-w) / -2);
  z-index: 0;
}

.stream__f {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-repeat: repeat-y;
  background-position: 0 0;
  image-rendering: pixelated;
  opacity: 0;
  animation: frames 0.4s steps(1, end) infinite;
}
.stream__f:nth-child(1) { animation-delay: 0s; }
.stream__f:nth-child(2) { animation-delay: 0.1s; }
.stream__f:nth-child(3) { animation-delay: 0.2s; }
.stream__f:nth-child(4) { animation-delay: 0.3s; }

@keyframes frames {
  0%, 24.99% { opacity: 1; }
  25%, 100%  { opacity: 0; }
}

/* ---------- the fish ----------
   Sits in the flow rather than inside the stream, so it can be wider than the water
   without being clipped by it. Same layer as the water, painted after it, so it passes
   in front of the stream and behind the project cards. Never given a transition: it
   moves in whole pixel steps like everything else here. */

.fish {
  position: absolute;
  left: 50%;
  top: 0;
  display: none;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .stream__f { animation: none; }
  .stream__f:nth-child(1) { opacity: 1; }
}

/* ---------- projects ---------- */

.works {
  position: relative;
  z-index: 1;
  padding: calc(var(--px) * 8) calc(var(--px) * 4) 0;
}

/* No projects yet. The padding above the first one has nothing to sit above, and on a
   short window it pushes the pool off the screen for no reason. */
.works:empty { padding: 0; }

.row {
  display: grid;
  grid-template-columns: 1fr var(--gutter) 1fr;
  align-items: start;
  padding-bottom: calc(var(--px) * 16);
}

.row--l .card { grid-column: 1; justify-self: end;   text-align: right; }
.row--r .card { grid-column: 3; justify-self: start; text-align: left;  }

.card {
  position: relative;
  max-width: calc(var(--px) * 62);
  background: #ffffff;
}

/* the spur of water that leaves the stream and reaches the card */
.card::before {
  content: "";
  position: absolute;
  top: calc(var(--px) * 7);
  width: var(--branch);
  height: var(--px);
  background: var(--water-mid);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--water-dark),
    0 var(--px) 0 0 var(--water-dark);
}
.row--l .card::before { right: calc(var(--branch) * -1); }
.row--r .card::before { left:  calc(var(--branch) * -1); }

.card__icon { margin-bottom: calc(var(--px) * 2); }
.row--l .card__icon { margin-left: auto; }

.card__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-transform: uppercase;
}

.card__text { color: var(--stone-dark); margin-top: var(--px); }

.act {
  display: inline-block;
  margin-top: calc(var(--px) * 2);
  padding: 0 calc(var(--px) * 2);
  border: var(--line) solid var(--ink);
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
}
.act:hover { background: var(--ink); color: #ffffff; }
.act:focus-visible { outline: var(--line) solid var(--ink); outline-offset: var(--px); }

.act--off { border-color: var(--stone-dark); color: var(--stone-dark); }

/* ---------- foot ---------- */

.foot { text-align: center; padding-bottom: calc(var(--px) * 8); }
.foot__pool { margin: 0 auto; }
.foot__note { color: var(--stone-dark); margin-top: calc(var(--px) * 4); }

.fallback { text-align: center; padding: calc(var(--px) * 4); }

/* ---------- narrow screens ----------
   No room for two columns, so the stream stops being a divider and becomes a spine:
   the cards sit centred on it and the water runs behind them, entering and leaving
   through hard black rules. The zig zag survives as the alignment of each card. */

@media (max-width: 54.99em) {
  :root { --px: 5px; --branch: 0px; --line: 3px; }

  .head { padding-top: calc(var(--px) * 6); }

  .works { padding: calc(var(--px) * 10) 0 0; }
  .row {
    display: block;
    padding: 0 calc(var(--px) * 3) calc(var(--px) * 14);
  }

  .card {
    max-width: calc(var(--px) * 96);
    margin: 0 auto;
    padding: calc(var(--px) * 3);
    border-top: var(--line) solid var(--ink);
    border-bottom: var(--line) solid var(--ink);
  }
  .card::before { display: none; }

  .row--l .card { text-align: left;  }
  .row--r .card { text-align: right; }
  .row--l .card__icon { margin-left: 0; }
  .row--r .card__icon { margin-left: auto; }
}