@charset "UTF-8";
@layer tokens, base;

@layer tokens {
  :root {
    --icon-pilcrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4v16'/%3E%3Cpath d='M17 4v16'/%3E%3Cpath d='M19 4H9.5a4.5 4.5 0 0 0 0 9H13'/%3E%3C/svg%3E");
    --icon-external: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="m13.5 6.5-3.148-3.148a1.205 1.205 0 0 0-1.704 0L6.352 5.648a1.205 1.205 0 0 0 0 1.704L9.5 10.5"/%3E%3Cpath d="M16.5 7.5 19 5"/%3E%3Cpath d="m17.5 10.5 3.148 3.148a1.205 1.205 0 0 1 0 1.704l-2.296 2.296a1.205 1.205 0 0 1-1.704 0L13.5 14.5"/%3E%3Cpath d="M9 21a6 6 0 0 0-6-6"/%3E%3Cpath d="M9.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l4.296-4.296a1.205 1.205 0 0 0 0-1.704l-2.296-2.296a1.205 1.205 0 0 0-1.704 0z"/%3E%3C/svg%3E');
  }

  @font-face {
    font-family: 'Fira Sans';
    src: url('../fonts/FiraSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Fira Sans';
    src: url('../fonts/FiraSans-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Fira Sans';
    src: url('../fonts/FiraSans-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Fira Sans';
    src: url('../fonts/FiraSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
}

@layer base {
  body {
    font-family: "Fira Sans", serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  code {
    background: #f4f4f4;
    padding: 2px 5px;
    border-radius: 3px;
  }

  pre {
    background: #f4f4f4;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
  }

  pre code {
    background: none;
    padding: 0;
  }

  blockquote {
    border-left: 4px solid #ddd;
    padding-left: 20px;
    margin-left: 0;
    color: #666;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
  }

  th,
  td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
  }

  th {
    background: #f4f4f4;
    font-weight: bold;
  }

  .footnote {
    font-size: 0.9em;
    color: #666;
  }

  .caps {
    font-size: 0.9em;
    letter-spacing: 0.05em;
  }

  .cv-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
  }

  .cv-title {
    font-size: 0.9rem;
    color: #a0a0a0;
    margin: 0;
  }

  .dates {
    font-size: 0.85rem;
    color: #888888;
    margin-bottom: 5px;
  }

  .location {
    font-size: 0.85rem;
    color: #888888;
    margin-bottom: 10px;
  }

  .back-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: 2rem;
  }

  .back-nav a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  .home-icon {
    inline-size: 1.5em;
    block-size: 1.5em;
  }

  a {
    text-decoration-thickness: 0.05em;
    text-underline-offset: 0.15em;
    transition: color 50ms;
    color: oklab(0.2 0.01 0.01);

    &:visited {
      color: oklab(0.2 0.01 0.01);
    }

    &:where([href^="https://adediiji.uk/"], [href^="http://localhost:8000/"], [href^="#"]):not([href^="/posts"], [href^="/projects"], [href^="/"])::before {
      content: "";
      display: inline-block;
      inline-size: 0.8em;
      block-size: 0.8em;
      -webkit-mask-image: var(--icon-pilcrow);
      mask-image: var(--icon-pilcrow);
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      background-color: currentColor;
      vertical-align: middle;
    }

    &:where([href^="http"]):not([href^="https://adediiji.uk/"], .hidden-link, :has(img, video, picture, audio))::after {
      content: "";
      display: inline-block;
      inline-size: 0.8em;
      block-size: 0.8em;
      -webkit-mask-image: var(--icon-external);
      mask-image: var(--icon-external);
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      background-color: currentColor;
      vertical-align: middle;
    }
  }

  :is(h1, h2, h3) a {
    background: none;
    text-decoration: none;
    font-feature-settings: normal;
    text-transform: initial;
    font-size: inherit;

    &:hover {
      text-decoration: underline;
      text-decoration-thickness: 0.5px;
      text-underline-offset: 0.1em;
    }
  }

  :is(h1, h2, h3, h4, h5, h6) {
    a[href^="#"] {
      position: relative;

      &::before {
        content: "";
        display: inline-block;
        inline-size: 0.8em;
        block-size: 0.8em;
        margin-inline-end: 0.1em;
        background-image: var(--icon-pilcrow);
        background-size: contain;
        background-repeat: no-repeat;
        vertical-align: middle;
        filter: brightness(0);
      }
    }

    :where(a[href^="http"]):not([href^="https://adediiji.uk/"], [href^="http://localhost:8000/"], .hidden-link, :has(img, video, picture, audio))::after {
      content: "";
      display: inline-block;
      inline-size: 0.8em;
      block-size: 0.8em;
      margin-inline-start: 0.25em;
      background-image: var(--icon-external);
      background-size: contain;
      background-repeat: no-repeat;
      vertical-align: middle;
      filter: brightness(0);
    }
  }
}