/* #region Font face declarations */
/* #endregion */

@layer reset, base, components, utilities;

@layer base {
  :root {
    --bg1: #101114;
    --bg2: #44484f;
    --fg1: #e8cccc;
    --fg2: #928484;
    --fg3: #6a6361;
    --accent1: #132;
    --accent2: #88a098;
    --text: 400 1em 'DINish Condensed__subset', "DINish Condensed", Arial Narrow, sans-serif;
    --display: 400 1em 'DINish Expanded__subset', "DINish Expanded", Arial, sans-serif;
    --invalid-html: 1em dashed red;
    --vertical-gutter: clamp(1em, 6vw, 10em);
    --col-width: min(30ch, calc((100% - var(--vertical-gutter) - 0.5em) / 2));

    font: var(--text);
    font-size: calc((16em + 5vw) / 16);
    line-height: 1.6rem;
    background: var(--bg1);
    color: var(--fg1);
    margin-block-end: 2rem;

    @media print {
      --bg1: white;
      --fg1: #101114;
      --fg2: #4a4d4c;
      --fg3: #6a6361;
      --accent1: #132;
      --accent2: #88a098;
      --col-width: 34ch;
      --vertical-gutter: 0;
      line-height: 1.2em;
    }
  }

  @page {
    size: A4;
    margin: 1in;
  }

  html {
    padding-inline-start: clamp(1em, 6vw, 10em);

    @media print {
      padding-inline-start: 0;
    }
  }

  body {
    padding-block-end: 3rem;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin-block: 1lh;
    @media print {
      margin-block: .5lh;
    }
  }

  a {
    color: currentColor;
  }

  dt {
    font-style: italic;
  }
}

@layer components {
  .full-page-grid {
    grid: auto-flow / repeat(auto-fill, var(--col-width));
  }

  .main-header {
    padding-block-start: 2em;
    margin-block-end: 0;
    font: var(--display);
    font-size: clamp(1.4em, 5vw, 2em);
    line-height: 1.2em;
    display: grid;
    grid-auto-columns: auto;

    @media print {
      padding-block-start: 0;
      display: flex;
    }

    .heading {
      width: min-content;
      font-size: 2em;
      line-height: .85em;
      margin-block: 0;
      @media print {
        display: none;
      }
    }

    .homelink {
      font: inherit;
      font-weight: 100;
      color: var(--accent2);
      text-decoration: none;
      @media print {
        font: var(--text);
        font-weight: bold;
        color: var(--fg1);
      }
    }

    .logo {
      display: block;
      grid-area: 1 / 2;
      justify-self: end;
      height: calc(1.5em);
      margin-block-end: 1em;
      margin-inline-end: 1em;
      @media print {
        display: none;
      }
    }
  }

  .body-columns {
    display: grid;
    grid-template-columns: repeat(2, var(--col-width));
    gap: 1lh;

    hyphens: auto;

    @media (max-width: 40em) {
      grid-template-columns: 1fr;
    }

    > :nth-child(odd) {
      grid-column: 1;
    }

    > * {
      margin: 0;
      padding: 0;
    }
  }

  .body-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--col-width));
    gap: 1lh;

    hyphens: auto;

    @media (max-width: 40em) {
      grid-template-columns: 1fr;
    }

    .fullwidth {
      grid-column: 1 / -1;
    }
  }

  .about-me {
    color: var(--fg2);
    text-align: justify;

    a {
      text-decoration: none;
      border-block-end: 1px solid var(--fg3);
    }
  }

  .testimonial {
    margin: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;

    blockquote {
      margin: 0;
      font: var(--display);
      font-weight: normal;
      color: var(--fg2);
    }

    figcaption {
      text-align: end;
      font-size: 0.8em;
      color: var(--accent2);
    }
  }

  .nav-links {
    @media (max-width: 40em) {
      grid-area: 1/1/1/1;
    }

    .list {
      padding-inline-start: 0;

      &:not([role="list"]) {
        outline: var(--invalid-html);
      }
    }

    .listitem {
      margin-block: 1lh;
    }

    .link {
      color: var(--accent2);
      &:not(:hover, :focus-visible, :active) {
        text-decoration: none;
      }
    }
  }

  .contact-info {
    display: grid;
    grid-template-columns: calc(0.5 * var(--col-width)) calc(
        1.5 * var(--col-width)
      );
    gap: 1lh;
    grid-auto-flow: dense;

    > dd {
      text-wrap: balance;
    }

    > * {
      margin: 0;
      padding: 0;
    }
  }

  /* .aesthetic-break {
    display: block;
  } */

  .action-link {
    color: var(--accent2);
    &:not(:hover, :focus-visible, :active) {
      text-decoration: none;
    }
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .de-emphasize {
    color: var(--fg2);
  }

  .curriculum-vitae {
    display: grid;
    grid-template-columns: calc(0.6 * var(--col-width)) calc(
        2 * var(--col-width)
      );
    gap: 1lh;

    @media (max-width: 40em) {
      grid-template-columns: 1fr;
    }

    :is(h2, h3) {
      margin: 0;
      font-size: 1em;
      text-wrap: stable;
    }
    h2 {
      font: var(--display);
      color: var(--accent2);
      margin-block: 0 2em;
    }
    :is(h3, dt) {
      font: var(--display);
    }

    > section {
      display: grid;
      grid-column: 1 / -1;
      margin-block: 1em;
      grid-template-columns: subgrid;
      * {
        grid-column: 1 / -1;
      }
      &:has(h2) > * {
        grid-column: -1;
      }
      h2 {
        grid-column: 1;
      }
      h2 + * {
        margin-block-start: 0;
      }
    }

    ul {
      padding-inline-start: 0;
      list-style: none;
      word-spacing: 1em;
      text-align: justify;
      li {
        display: inline-block;
        word-spacing: initial;
        margin-block: 0;
        p {
          display: contents;
        }
      }
    }

    dl {
      margin-block: 0;
    }

    dd {
      margin-block: 0.5em;
      margin-inline-start: 1em;
    }

    dt {
      font-style: normal;
      font-weight: bold;
    }

    :is(#contact) {
      grid-column: 1;
      color: var(--accent2);
    }

    :is(#summary) {
      grid-column: 2;
    }

    :is(#skills-section) dt {
      font: var(--text);
      font-weight: bold;
    }

    :is(#experience-section) h3 .box {
      display: block;
      font: var(--text);
      color: var(--accent2);
      font-weight: normal;
    }

    :is(#experience-section, #portfolio-section) p {
      /* color: var(--fg2); */
    }

    :is(#portfolio-section, #activities-section, #references-section) p {
      margin: 0;
    }

    .activity {
      > :not(h3) {
        margin-inline-start: 1em;
      }
      > h3 .box {
        display: block;
      }
      .time {
        display: block;
      }
      & + & {
        margin-block-start: 3em;
      }
    }
  }

  .portfolio-item {
    color: var(--fg2);

    :is(h3) {
      font: var(--display);
      font-weight: bold;
      font-size: 1em;
      margin-block: 0;
      color: var(--fg1);
    }

    .role {
      margin-block-start: 0;
      color: var(--accent2);
    }
  }

  .flat-page {
    max-width: calc(var(--col-width) * 2 + 1lh);

    h2 {
      font: var(--display);
      color: var(--accent2);
      margin-block: 4em 1em;
    }

    ul, ol {
      li {
        margin-block: .5lh;
      }
    }
  }

  .small-heading {
    font: var(--display);
    font-size: 1rem;
    font-weight: normal;
    color: var(--fg1);
    margin-top: 2em;
    margin-bottom: 0em;
  }
}

@layer utilities {
  .margin-block-end\:-1lh {
    margin-block-end: -1lh;
  }
}

/* From: Bell, Andy: "A (more) Modern CSS Reset", 2023-09-18. 2024-01-10 <https://piccalil.li/blog/a-more-modern-css-reset/>. */
@layer reset {
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Prevent font size inflation */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  /* Remove default margin in favour of better control in authored CSS */
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin-block-end: 0;
  }

  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }

  /* Set core body defaults */
  body {
    min-height: 100vh;
    line-height: 1.5;
  }

  /* Set shorter line heights on headings and interactive elements */
  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1;
  }

  /* Balance text wrapping on headings */
  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  /* A elements that don't have a class get default styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }

  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }

  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  /* Make sure textareas without a rows attribute are not tiny */
  textarea:not([rows]) {
    min-height: 10em;
  }

  /* Anything that has been anchored to should have extra scroll margin */
  :target {
    scroll-margin-block: 5ex;
  }
}