/*
 * jadrizk.com
 *
 * Vocabulary, used the same way in the markup, the styles and the scripts:
 *   face   the page as first read
 *   paper  a copy of the face underneath it, made by script at load
 *   lens   the window that shows the paper
 *   flip   a line with two wordings, one for each layer
 *
 * The one rule: a flip must have the same box in both layers. Anything added to the paper
 * alone (words, carets, pen notes) stays out of the flow. See README.md.
 */

/* ---------- fonts ---------- */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/geist-latin-300-500.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400-500.woff2") format("woff2");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/caveat-latin-500.woff2") format("woff2");
}

/* ---------- tokens ---------- */

:root {
  --night: #0a0a0a;
  --paper: #efe9dc;
  --paper-light: #f8f4ea;
  --paper-ink: #17150f;
  --paper-muted: #5d584c;
  --pen-red: #a8341d;

  /* the surface being written on; the paper layer and the invoice set their own */
  --ink: #fafafa;
  --muted: #8f8f8f;
  --rule: rgba(255, 255, 255, .14);

  --font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-hand: "Caveat", "Bradley Hand", cursive;

  --gutter: clamp(22px, 4.2vw, 60px);
  --size-line: clamp(20px, 2.55vw, 38px);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --word-stagger: 26ms;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html {
  background: var(--night);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  font: 400 15px/1.5 var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--night); }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* ---------- layers and screens ---------- */

.stage { position: relative; min-height: 100vh; min-height: 100svh; }

.layer { padding: 0 var(--gutter); }

.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--gutter) 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(18px, 2.8vh, 40px);
}

.screen + .screen { border-top: 1px solid var(--rule); }

.label {
  margin: 0;
  font: 500 11.5px/1.4 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- a flip: two wordings in one box ---------- */

/* without script the paper wording simply follows the face wording */
.flip__paper {
  display: block;
  margin-top: .35em;
  font: 400 13px/1.45 var(--font-mono);
  letter-spacing: -.01em;
  color: var(--muted);
}
.flip__paper::before { content: "\21B3\00a0"; }

/* with script both wordings share one grid cell, so the box is as large as the larger one */
.js .flip__paper { margin-top: 0; }
.js .flip__paper::before { content: none; }
.js .flip { display: grid; width: fit-content; max-width: 100%; position: relative; }
.js .flip--inline { display: inline-grid; vertical-align: baseline; }
.js .flip--wide { width: 100%; }
.js .flip > .flip__face,
.js .flip > .flip__paper { grid-area: 1 / 1; min-width: 0; }
.js .flip > .flip__paper { align-self: center; }
.js .face .flip__paper { opacity: 0; pointer-events: none; user-select: none; }
.js .flip,
.js .flip a { -webkit-touch-callout: none; }

/* a cell inside a flip that holds the two wordings, where the flip itself has other columns */
.wordings { display: grid; min-width: 0; }
.js .wordings > * { grid-area: 1 / 1; min-width: 0; }

/* lines above and below an open flip move away from it */
.js .steps-aside { transition: translate .45s var(--ease-out); }

.flip:focus { outline: none; }
.flip:focus-visible,
.flip a:focus-visible { outline: 1px dashed var(--ink); outline-offset: 8px; border-radius: 4px; }
/* with script the lens opens on the focused flip and is the focus mark */
.js .flip:focus-visible,
.js .flip a:focus-visible { outline-color: transparent; }

/* ---------- screen 1: the statement ---------- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 16px;
}
.js .masthead .flip > * { justify-self: end; }

.masthead .flip__paper,
.links .flip__paper,
.footer .flip__paper { font-size: 11px; letter-spacing: 0; text-transform: none; white-space: nowrap; }

.hero { align-self: center; display: grid; gap: clamp(14px, 2.4vh, 28px); }

.name { margin: 0; font: 500 clamp(18px, 2vw, 30px)/1.2 var(--font-sans); letter-spacing: -.02em; }

.statement {
  --display-size: clamp(40px, 12vw, 200px);
  margin: 0 0 0 -.05em;
  font: 400 var(--display-size)/.88 var(--font-sans);
  letter-spacing: -.065em;
}

.claims {
  display: grid;
  gap: clamp(12px, 1.6vh, 16px);
  font: 300 var(--size-line)/1.18 var(--font-sans);
  letter-spacing: -.03em;
}
.claims p { margin: 0; }
.claims .flip__paper { font-size: clamp(13px, 1.4vw, 20px); }

/* ---------- screen 2: the record ---------- */

.record {
  grid-row: 2;
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: stretch;
  gap: clamp(22px, 4vh, 44px) clamp(24px, 5vw, 80px);
}

.record__main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 6vh, 64px);
  min-width: 0;
}

.job { display: grid; gap: clamp(12px, 2vh, 20px); }
.job__title { margin: 0; font: 400 clamp(20px, 2.2vw, 32px)/1.18 var(--font-sans); letter-spacing: -.03em; }
.job__summary {
  margin: 0;
  max-width: 34em;
  font: 300 clamp(17px, 1.75vw, 25px)/1.32 var(--font-sans);
  letter-spacing: -.02em;
  color: var(--muted);
}
.paper .job__summary { color: var(--paper-ink); }

.contact { display: grid; gap: clamp(18px, 3vh, 28px); }

.call-to-action {
  --display-size: clamp(40px, 7vw, 104px);
  margin: 0 0 0 -.05em;
  font: 400 var(--display-size)/.92 var(--font-sans);
  letter-spacing: -.06em;
}

.links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }

.footer {
  grid-row: 3;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  font-size: 13px;
  color: var(--muted);
}
.footer .flip__face { color: var(--ink); }

/* ---------- the invoice ---------- */

.experience { display: grid; gap: 14px; min-width: 0; }
.experience__heading { margin: 0; font: 400 clamp(18px, 1.7vw, 24px)/1.2 var(--font-sans); letter-spacing: -.02em; }

.invoice {
  --ink: var(--paper-ink);
  --muted: var(--paper-muted);
  --rule: rgba(23, 21, 15, .22);
  --torn-edge:
    linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 6px repeat-x;

  width: min(400px, 100%);
  padding: 18px 18px 16px;
  background: var(--paper);
  color: var(--paper-ink);
  font: 400 12px/1.45 var(--font-mono);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
  -webkit-mask: var(--torn-edge);
  mask: var(--torn-edge);
}
/* on the paper the slip is a lighter sheet with an edge, and its flips carry no outline */
.paper .invoice {
  background: var(--paper-light);
  box-shadow: 0 0 0 1px rgba(23, 21, 15, .28), 0 14px 30px -20px rgba(23, 21, 15, .55);
}
.paper .invoice .flip { outline: none; }

.invoice a { color: inherit; }
.invoice .flip__paper { font-size: 12px; line-height: 1.45; }

/* one grid for the header and every row, so periods, names and durations line up */
.invoice__header,
.invoice__row {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr) 4.4em;
  column-gap: 10px;
  align-items: start;
}

.invoice__header { padding-bottom: 10px; border-bottom: 1px dashed var(--rule); }
.invoice__title { grid-column: 1 / 4; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.invoice__meta { grid-column: 1 / 4; color: var(--paper-muted); }

.invoice__rows { margin: 0; padding: 6px 0; list-style: none; }
.invoice__rows > li { padding: 6px 0; }

.invoice__period,
.invoice__duration { font-variant-numeric: tabular-nums; white-space: nowrap; }
.invoice__duration { display: grid; text-align: right; }
.invoice__duration > * { grid-area: 1 / 1; justify-self: end; transition: opacity .2s linear; }
.invoice__duration-next { opacity: 0; font-weight: 500; }

.company { display: grid; gap: 1px; align-content: start; }
.company a { font-weight: 500; justify-self: start; }
.company__industry { color: var(--paper-muted); }

.invoice__row--minor { font-size: 10.5px; color: var(--paper-muted); }
.invoice__row--minor .flip__paper { font-size: 10.5px; }
.invoice__row--minor .company a { font-weight: 400; }

.invoice__divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 3px 0;
  border-top: 1px dashed rgba(168, 52, 29, .45);
  border-bottom: 1px dashed rgba(168, 52, 29, .45);
  color: var(--pen-red);
  text-align: center;
}
.paper .invoice__divider .flip__paper { color: var(--pen-red); }

.invoice__total { margin: 0; padding: 8px 0; border-top: 1px solid var(--paper-ink); font-weight: 500; }

.invoice__due {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: start;
  margin: 8px 0 0;
  padding: 10px 0;
  border-top: 1px dashed var(--rule);
}
.invoice__due a { white-space: nowrap; text-align: right; }

/* the music row has played through: the first full-time row is marked as next */
.invoice__row.is-up-next {
  background: rgba(23, 21, 15, .1);
  box-shadow: 0 0 0 4px rgba(23, 21, 15, .1);
  border-radius: 1px;
}
.is-up-next .invoice__duration-value { opacity: 0; }
.is-up-next .invoice__duration-next { opacity: 1; }

/* ---------- one small detail per company, on the paper, when its row is open ---------- */

.detail { position: absolute; right: 0; top: 21px; display: none; color: var(--paper-ink); }
.invoice__row--minor .detail { top: 17px; }
.paper .detail { display: block; }

.detail i { background: currentColor; opacity: .1; }

.detail__code,
.detail__windows { display: grid; gap: 1px; width: 24px; height: 24px; }
.detail__code { grid-template-columns: repeat(5, 1fr); }
.detail__windows { grid-template-columns: repeat(3, 1fr); gap: 3px; width: 23px; height: 23px; }
.detail__windows i { background: none; box-shadow: inset 0 0 0 1px currentColor; opacity: .5; }

.detail__bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.detail__bars i { width: 3px; border-radius: 2px; background: var(--paper-muted); opacity: .35; }
.detail__bars i:nth-child(1) { height: 9px; }
.detail__bars i:nth-child(2) { height: 16px; }
.detail__bars i:nth-child(3) { height: 12px; }

.detail__tag {
  position: absolute;
  right: 0;
  top: 27px;
  font: 500 8px/1 var(--font-mono);
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--pen-red);
  opacity: 0;
}

.detail__stamp {
  display: block;
  padding: 3px 5px 2px;
  border: 1.5px solid var(--pen-red);
  border-radius: 3px;
  font: 500 8.5px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pen-red);
  rotate: -7deg;
  opacity: 0;
  scale: 1.5;
}

[data-detail="progress"] .detail { left: 0; right: 0; top: auto; bottom: -4px; }
.detail__progress { display: block; height: 1.5px; background: var(--paper-ink); transform: scaleX(0); transform-origin: left; }

@keyframes fill-cell { to { opacity: 1; } }
@keyframes light-window { to { opacity: 1; background: currentColor; } }
@keyframes warm-bar { to { opacity: 1; background: var(--pen-red); } }
@keyframes play-through { to { transform: scaleX(1); } }

/* --order is each cell's turn, set by script from data-order */
.paper .flip.is-open .detail__code .fills { animation: fill-cell .01s steps(1) forwards; animation-delay: calc(var(--order) * 42ms + 520ms); }
.paper .flip.is-open .detail__windows .fills { animation: light-window .01s steps(1) forwards; animation-delay: calc(var(--order) * 150ms + 520ms); }
.paper .flip.is-open .detail__bars .fills { animation: warm-bar .9s linear forwards; animation-delay: calc(var(--order) * 380ms + 520ms); }
.paper .flip.is-open .detail__tag { opacity: 1; transition: opacity .01s linear 1.65s; }
.paper .flip.is-open .detail__stamp { opacity: .9; scale: 1; transition: opacity .12s linear .95s, scale .22s cubic-bezier(.2, .9, .3, 1) .95s; }
.paper .flip.is-open .detail__progress { animation: play-through 3s linear .5s forwards; }

/* ---------- entrance: each screen rises once, in the order of data-rise ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.js .rise { opacity: 0; }
.js .screen.has-entered .rise { animation: rise .8s var(--ease-out) forwards; animation-delay: calc(var(--rise-step, 0) * 85ms + 60ms); }

[data-rise="1"] { --rise-step: 1; }
[data-rise="2"] { --rise-step: 2; }
[data-rise="3"] { --rise-step: 3; }
[data-rise="4"] { --rise-step: 4; }
[data-rise="5"] { --rise-step: 5; }
[data-rise="8"] { --rise-step: 8; }

/* ---------- the paper ---------- */

.paper {
  --muted: var(--paper-muted);
  --rule: rgba(23, 21, 15, .2);

  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: var(--paper-ink);
  background: radial-gradient(rgba(23, 21, 15, .13) 1px, transparent 1.3px) 0 0 / 22px 22px, var(--paper);
  clip-path: inset(50% 50% 50% 50%);   /* closed until the lens script draws it */
}

.js .paper .screen .rise,
.js .paper .screen.has-entered .rise { animation: none; opacity: 1; }

.paper .flip__face { visibility: hidden; }
.paper .flip__paper { color: var(--paper-ink); }

.paper .flip { outline: 1px dashed rgba(23, 21, 15, .3); outline-offset: 6px; border-radius: 2px; }
.paper .flip::before {
  content: attr(data-legend);
  position: absolute;
  right: 8px;
  top: -6px;
  transform: translateY(-50%);
  padding: 0 5px;
  background: var(--paper);
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pen-red);
}
.paper .flip:not([data-legend])::before { content: none; }

/* the paper wording is typed: each word waits its turn (--word-index, set by script) */
.paper .word { display: inline-block; opacity: 0; transition: opacity .12s linear; }
.paper .flip.is-open .word,
.paper.is-turned-over .word { opacity: 1; transition: opacity 0s linear; transition-delay: calc(var(--word-index) * var(--word-stagger) + 70ms); }
.paper.is-turned-over .word { transition-delay: calc(var(--word-index) * 8ms); }

/* out of the flow, so the caret can never push a line to wrap and make the paper taller than the face */
.paper .caret {
  position: absolute;
  width: .5em;
  height: 1.05em;
  margin: .1em 0 0 .15em;
  background: var(--paper-ink);
  opacity: 0;
}
@keyframes blink { 50% { opacity: 0; } }
.paper .flip.is-open .caret {
  opacity: 1;
  animation: blink 1s steps(1) infinite;
  animation-delay: calc(var(--word-index) * var(--word-stagger) + 400ms);
  transition: opacity 0s linear calc(var(--word-index) * var(--word-stagger) + 90ms);
}

/* ---------- the lens ---------- */

.lens {
  --lens-radius: 0px;

  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .65),
    -1.2px 0 0 0 rgba(255, 96, 72, .3), 1.2px 0 0 0 rgba(72, 200, 255, .3),
    0 30px 80px -16px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 12px 26px -12px rgba(255, 255, 255, .7),
    inset 0 -16px 28px -14px rgba(23, 21, 15, .3),
    inset 0 0 22px rgba(23, 21, 15, .1);
  opacity: 0;
  transition: opacity .25s linear;
}
.lens.is-visible { opacity: 1; }

/* the polished rim: a highlight that runs round the edge, brightest top-left */
.lens::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 200deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .12) 22%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .08) 76%, rgba(255, 255, 255, .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* the thick edge of the glass: the page just outside the rim is bent out of focus */
.lens::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: calc(var(--lens-radius) + 8px);
  padding: 8px;
  -webkit-backdrop-filter: blur(3px) brightness(1.25);
  backdrop-filter: blur(3px) brightness(1.25);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.cursor-dot {
  position: fixed;
  left: -3px;
  top: -3px;
  z-index: 4;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
}
.fine-pointer .cursor-dot.is-visible { opacity: 1; }
.fine-pointer,
.fine-pointer a,
.fine-pointer .flip { cursor: none; }

.is-holding { user-select: none; -webkit-user-select: none; }

/* ---------- pen notes: on the paper only, and out of the flow so they can never move a line ---------- */

.pen-note {
  position: absolute;
  z-index: 1;
  width: max-content;
  max-width: 12em;
  font: 500 clamp(17px, 1.55vw, 24px)/1.08 var(--font-hand);
  letter-spacing: 0;
  text-transform: none;
  white-space: pre-line;
  color: var(--pen-red);
  rotate: var(--tilt, -3deg);
  pointer-events: none;
}

/* anchored notes have no offsets, so each starts where its line of text ends */
.pen-note--typed { --tilt: -4deg; margin: calc(var(--display-size) * .36) 0 0 calc(var(--display-size) * .14); max-width: 9em; }
.pen-note--bugs { --tilt: -2deg; margin: .18em 0 0 .8em; }
.pen-note--scroll { --tilt: -2deg; margin: -.3em 0 0 1em; max-width: none; }
.pen-note--human { --tilt: -3deg; margin: calc(var(--display-size) * .34) 0 0 calc(var(--display-size) * .16); }

/* loose notes sit in the parts of their screen the layout leaves empty at 1440x900. At other
   sizes one can fall behind an open line, where the lens would show a slice of it, so they
   step out while a line on their screen is open. Turning the page over shows them all. */
.paper:not(.is-turned-over) .screen:has(.flip.is-open:not(.flip--inline)) > .pen-note { visibility: hidden; }

.pen-note--todo { --tilt: 3deg; right: 3%; top: 43%; }
.pen-note--sleep { --tilt: -3deg; right: 2%; top: 73%; }
.pen-note--font { --tilt: 2deg; left: 37%; top: 81%; }
.pen-note--scrolled { --tilt: -2deg; left: 40%; top: 9%; }
.pen-note--buzzwords { --tilt: 2deg; left: 27%; top: 39%; }
.pen-note--coffee { --tilt: -5deg; left: 48%; top: 70%; }
.pen-note--cookies { --tilt: -1deg; left: 58%; top: -.5em; max-width: none; }

/* ---------- narrow screens ---------- */

@media (max-width: 820px) {
  .masthead { flex-wrap: nowrap; font-size: 10px; letter-spacing: .06em; }
  .masthead .flip__paper,
  .links .flip__paper,
  .footer .flip__paper { white-space: normal; }

  /* the paper wording runs to three lines here; centring the face wording keeps the gaps even */
  .js .claims .flip > .flip__face { align-self: center; }

  .record { grid-template-columns: 1fr; row-gap: 28px; }
  .record__main { display: contents; }
  .job { order: 1; }
  .experience { order: 2; justify-self: center; width: min(400px, 100%); }
  .experience__heading { justify-self: center; text-align: center; }
  .contact { order: 3; }

  /* no roaming lens and little margin: five notes stay. They must remain inline, or an
     anchored note drops to the line below instead of starting where its text ends. */
  .pen-note { display: none; }
  .pen-note--typed,
  .pen-note--bugs,
  .pen-note--todo,
  .pen-note--sleep,
  .pen-note--human { display: inline; }
  .pen-note--typed,
  .pen-note--human { max-width: none; }
  .pen-note--todo { right: 0; top: 13%; }
  .pen-note--sleep { right: 2%; top: 77%; max-width: 10em; }
}

/* ---------- reduced motion: nothing travels, everything is simply there ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .rise,
  .js .screen.has-entered .rise { animation: none; opacity: 1; }
  .js .steps-aside { transition: none; }
  .lens { transition: none; }
  .paper .word,
  .paper .flip.is-open .word,
  .paper.is-turned-over .word { transition: none; }
  .paper .flip.is-open .caret { animation: none; }
  .paper .flip.is-open .detail__code .fills,
  .paper .flip.is-open .detail__windows .fills,
  .paper .flip.is-open .detail__bars .fills,
  .paper .flip.is-open .detail__progress { animation-duration: .01s; animation-delay: 0s; }
  .paper .flip.is-open .detail__tag,
  .paper .flip.is-open .detail__stamp { transition: none; }
}

/* ---------- print: the paper wording, black on white ---------- */

@media print {
  html,
  body { background: #fff; color: #000; }
  .paper,
  .lens,
  .cursor-dot { display: none; }
  .js .screen .rise,
  .js .screen.has-entered .rise { animation: none; opacity: 1; }
  .js .flip .flip__face { visibility: hidden; }
  .js .face .flip__paper { opacity: 1; color: #000; }
  .screen { min-height: 0; break-inside: avoid; }
}

/* ---------- the 404 page ---------- */

.not-found a { text-decoration-color: currentColor; }