@font-face {
  font-family: "AnkeHand";
  src: url("assets/fonts/AnkeHand.woff2") format("woff2");
  font-display: block;
}

:root {
  --ink: #000;
  --blue: #0009ff;
  --red: #e44848;
  --marker: rgba(255, 238, 0, 0.3);
  --margin: 20px;
}
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
}

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* fit.js adds this once the text fits, so the page never scrolls */
html.is-fitted,
html.is-fitted body {
  height: 100%;
  overflow: hidden;
}

.page {
  padding: var(--margin);
}
.bio {
  font-family: "AnkeHand", "Comic Sans MS", cursive;
  font-weight: 400;
  /* No-JS fallback; fit.js overrides this with an exact size */
  font-size: clamp(14px, 0.9vw + 9px, 18px);
  line-height: 1.3;
  overflow-wrap: break-word;
  font-kerning: normal;
}

.bio p {
  margin: 0 0 1.3em;
}

.bio .col:last-child p:last-child {
  margin-bottom: 0;
}

/* Colors */
.bio .blue,
.bio .blue a { color: var(--blue); }
.bio .red { color: var(--red); }

.bio a {
  color: inherit;
  text-decoration: none;
  border-radius: 2px;
}

.bio a:hover,
.bio a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}

.bio a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Email shown as plain text, but drawn by CSS so it isn't in the HTML for scrapers or search engines,
   and pieced together so it doesn't match an email pattern in this file either. */
.email::after {
  content: "ali" ".tohme" "[" "at" "]" "outlook" "." "de";
}

.email {
  -webkit-user-select: none;
  user-select: none;
}

/* Selecting text uses the same yellow marker as the design */
::selection {
  background: rgba(255, 238, 0, 0.3);
  color: inherit;
}

/* Yellow marker, repeated on every wrapped line */
mark {
  color: inherit;
  /* Band of one line height centred on the text, not the font's much taller inline box */
  background: linear-gradient(-0.6deg, transparent 3%, var(--marker) 3%, var(--marker) 97%, transparent 97%) left 0 top 0.38em / 100% 1.2em no-repeat;
  mix-blend-mode: multiply;
  padding: 0 0.12em;
  margin: 0 -0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* "Ali Tohme," with two overlapping hand-drawn marker strokes */
.name-mark {
  position: relative;
  white-space: nowrap;
  isolation: isolate;
}

.name-mark::before,
.name-mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0.38em;
  height: 1.2em;
  left: -0.1em;
  right: -0.15em;
  background: url("assets/img/name-mark-a.svg") center / 100% 100% no-repeat;
}

.name-mark::after {
  background-image: url("assets/img/name-mark-b.svg");
  left: 0.2em;
  right: -0.4em;
  top: 0.3em;
  transform: rotate(-2.59deg);
}

/* "Over 12+ years" circled by hand */
.circled {
  position: relative;
  white-space: nowrap;
}

.circled::before {
  content: "";
  position: absolute;
  left: -0.62em;
  right: -0.55em;
  top: 0.06em;
  height: 1.75em;
  background: url("assets/img/circle.svg") center / 100% 100% no-repeat;
  transform: rotate(-3.37deg);
  pointer-events: none;
}

/* "Finance, Health-tech, Web3, AI" with a doubled sketchy underline */
.scribble {
  /* AnkeHand's inline box is ~2.1em tall with the baseline at ~1.26em, so position from the top */
  background:
    url("assets/img/underline-a.svg") left 0 top 1.33em / 100% 0.27em no-repeat,
    url("assets/img/underline-b.svg") left 0 top 1.4em / 100% 0.17em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (prefers-reduced-motion: no-preference) {
  .bio { transition: opacity 0.2s ease; }
}

/* Hide the text until it's been sized, so there's no jump */
html.js:not(.is-fitted):not(.is-fitted-fallback) .bio { opacity: 0; }