@layer pages {
  .talks {
    font-size: var(--text-body);
    line-height: var(--leading-body);

    & :is(h2, h3, h4) {
      margin-block-start: 0;
    }

    & :is(section, h2, h3)[id] {
      scroll-margin-block-start: var(--space-24);
    }

    & p {
      margin-block: 0 1em;
    }
  }

  .talks-intro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-32);
    padding-block: calc(var(--logo-overlap) + var(--space-16)) var(--space-32);

    & h1 {
      margin: 0;
    }

    & p {
      max-inline-size: 48ch;
      margin: 0;
    }
  }

  .talks-meta {
    color: var(--color-muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .talks-event {
    display: block;
  }

  .talks-years,
  .talks-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-24);

    & a {
      padding-block: var(--space-4);
    }
  }

  .talks-section {
    padding-block: var(--space-64);
  }

  .talks-paper {
    background: var(--color-paper);
  }

  .talks-heading {
    margin-block-end: var(--space-40);

    & h2 {
      margin-block-end: 0;
    }
  }

  .talks-selected,
  .talks-podcasts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-40) var(--space-32);
    margin: 0;
    padding: 0;

    & h3 {
      margin-block-end: var(--space-16);
    }
  }

  .talks-selected {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;

    & h2 {
      margin-block-end: var(--space-16);
      font-size: var(--text-h3);
      font-weight: var(--weight-subheading);
      line-height: var(--leading-h3);
    }
  }

  .talks-cover {
    display: block;
    inline-size: 100%;
    block-size: auto;
    margin-block-end: var(--space-20);
    border-radius: var(--radius-l);
  }

  .talks-podcast-heading {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-20);
    margin-block-end: var(--space-20);

    & img {
      display: block;
      border-radius: var(--radius-l);
    }

    & h3 {
      margin-block-end: 0;
    }

    & .talks-meta {
      margin-block-end: var(--space-8);
    }
  }

  .talks-years {
    gap: var(--space-8) var(--space-20);
    margin-block-end: var(--space-40);
    font-variant-numeric: tabular-nums;
  }

  .talks-year {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--space-32);
    padding-block: var(--space-32) var(--space-8);
    border-block-start: 1px solid var(--color-line);

    & > h3 {
      font-size: var(--text-h2);
      line-height: var(--leading-h2);
      font-variant-numeric: lining-nums;
    }
  }

  .talks-entry {
    margin-block-end: var(--space-32);

    & h4 {
      margin-block-end: var(--space-8);
      font-size: var(--text-h3);
      line-height: var(--leading-h3);
    }

    & > p {
      max-inline-size: 70ch;
      margin-block-end: var(--space-8);
    }
  }

  .talks-links {
    font-size: var(--text-ui);
  }

  .talks-note {
    margin-block-start: var(--space-32);

    & h3 {
      font-size: var(--text-h3);
      line-height: var(--leading-h3);
    }

    & p {
      max-inline-size: 75ch;
    }
  }

  .talks-series {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-32);
    align-items: start;
    margin-block-start: var(--space-64);

    & > .talks-meta {
      grid-column: 1 / -1;
      margin: 0;
    }

    & ol {
      margin: 0;
      padding-inline-start: 2em;
      list-style-type: decimal;
    }

    & li {
      padding-inline-start: var(--space-8);
      margin-block-end: var(--space-4);
    }
  }

  .talks-conferences {
    margin: 0;

    & > div {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      position: relative;
      gap: var(--space-32);
      padding-block: var(--space-24);
    }

    & dt {
      font: italic var(--weight-subheading) var(--text-h3) / var(--leading-h3) var(--font-display);
    }

    & dd {
      margin: 0;
    }

    & dd p {
      max-inline-size: 65ch;
      margin-block: var(--space-8) 0;
    }
  }

  .talks-pitercss,
  .talks-meetup {
    padding-inline-end: 128px;
  }

  .talks-identity-hand {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: -32px;
    inline-size: 136px;
    block-size: auto;
    rotate: 8deg;
    pointer-events: none;
  }

  .talks-pitercss::before,
  .talks-meetup::after {
    content: '';
    position: absolute;
    inline-size: 128px;
    block-size: 97px;
    mask: url("https://i.simonenko.xyz/talks/events/meetup.svg") center / contain no-repeat;
    pointer-events: none;
  }

  .talks-pitercss::before {
    inset-block-start: 80px;
    inset-inline-start: 32px;
    background: #00d6b2;
    rotate: -8deg;
  }

  .talks-conferences > .talks-meetup {
    padding-block-end: 88px;
  }

  .talks-meetup::after {
    inline-size: 112px;
    block-size: 85px;
    inset-block-end: 0;
    inset-inline-end: 160px;
    background: #0094da;
    rotate: 180deg;
  }

  .talks-conferences > .talks-digitale {
    padding-block-end: 144px;
  }

  .talks-viruses {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 144px;
    pointer-events: none;

    & img {
      position: absolute;
      block-size: auto;
    }

    & picture:nth-child(1) img {
      inline-size: 144px;
      inset-inline-start: 0;
      inset-block-end: 32px;
      rotate: -12deg;
    }

    & picture:nth-child(2) img {
      inline-size: 96px;
      inset-inline-start: 18%;
      inset-block-end: 8px;
      rotate: -8deg;
    }

    & picture:nth-child(3) img {
      inline-size: 88px;
      inset-inline-start: 34%;
      inset-block-end: -4px;
      rotate: -8deg;
    }

    & picture:nth-child(4) img {
      inline-size: 136px;
      inset-inline-start: 48%;
      inset-block-end: -8px;
      rotate: 10deg;
    }

    & picture:nth-child(5) img {
      inline-size: 136px;
      inset-inline-start: 67%;
      inset-block-end: 16px;
      rotate: -12deg;
    }

    & picture:nth-child(6) img {
      inline-size: 120px;
      inset-inline-start: 84%;
      inset-block-end: 48px;
      rotate: -22deg;
    }
  }

  .talk-detail {
    padding-block-end: var(--space-64);
  }

  .talk-header {
    margin-block-end: var(--space-48);
  }

  .talk-materials {
    margin-block-start: var(--space-16);
  }

  .talk-reading {
    display: grid;
    grid-template-columns: minmax(0, 59fr) minmax(0, 41fr);
    align-items: start;
  }

  .talk-contents {
    font-size: var(--text-ui);

    & h2 {
      font-size: var(--text-h3);
      line-height: var(--leading-h3);
    }

    & ol {
      margin-block: 0 var(--space-32);
      padding-inline-start: 1.5em;
      list-style-type: decimal;
    }

    & li {
      margin-block-end: var(--space-4);
    }
  }

  .talk-text {
    min-inline-size: 0;
    max-inline-size: 66ch;
    padding-inline-end: var(--space-32);

    & > p {
      margin-block-end: var(--space-20);
    }

    & > p:first-child {
      font-size: var(--text-lead);
      line-height: var(--leading-lead);
    }

    & > h2 {
      margin-block: var(--space-48) var(--space-12);
      font-size: var(--text-h2);
      line-height: var(--leading-h2);
    }

    & > h3 {
      margin-block: var(--space-32) var(--space-8);
      font-size: var(--text-h3);
      line-height: var(--leading-h3);
    }
  }

  .talk-slide {
    margin: var(--space-32) 0;

    & a,
    & img {
      display: block;
      inline-size: 100%;
    }

    & img {
      block-size: auto;
      box-shadow: var(--elevation-1);
    }
  }

  .talk-callout {
    margin-block: var(--space-32);
    font: italic 400 var(--text-lead) / var(--leading-lead) var(--font-display);

    & p:last-child {
      margin-block-end: 0;
    }
  }

  @media (min-width: 1150px) {
    .talks-entry[data-illustration] {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        inset-block-start: var(--art-top, 64px);
        inset-inline-end: calc(100% + var(--space-24));
        inline-size: var(--art-width, 200px);
        block-size: var(--art-height, 200px);
        border-radius: 48% 12% 48% 12%;
        corner-shape: round;
        background: var(--talk-illustration) center / cover no-repeat;
        box-shadow: var(--elevation-1);
        rotate: -3deg;
        pointer-events: none;
      }
    }

    .talks-entry:is(
        [data-illustration='speakers'],
        [data-illustration='space'],
        [data-illustration='teaching'],
        [data-illustration='time']
      )::after {
      inset-inline-end: 0;
      border-radius: 12% 48% 12% 48%;
      rotate: 3deg;
    }

    .talks-entry[data-illustration='debate'] {
      --talk-illustration: image-set(
        url("https://i.simonenko.xyz/talks/archive/debate-small.avif") type('image/avif') 1x,
        url("https://i.simonenko.xyz/talks/archive/debate.avif") type('image/avif') 2x,
        url("https://i.simonenko.xyz/talks/archive/debate-small.jpg") type('image/jpeg') 1x,
        url("https://i.simonenko.xyz/talks/archive/debate.jpg") type('image/jpeg') 2x
      );
      --art-width: 168px;
      --art-height: 152px;
      --art-top: -8px;
    }

    .talks-entry[data-illustration='speakers'] {
      --talk-illustration: image-set(
        url("https://i.simonenko.xyz/talks/archive/speakers-small.avif") type('image/avif') 1x,
        url("https://i.simonenko.xyz/talks/archive/speakers.avif") type('image/avif') 2x,
        url("https://i.simonenko.xyz/talks/archive/speakers-small.jpg") type('image/jpeg') 1x,
        url("https://i.simonenko.xyz/talks/archive/speakers.jpg") type('image/jpeg') 2x
      );
      --art-width: 144px;
      --art-height: 144px;
      --art-top: 8px;
    }

    .talks-entry[data-illustration='holyjs'] {
      --talk-illustration: image-set(
        url("https://i.simonenko.xyz/talks/archive/holyjs-small.avif") type('image/avif') 1x,
        url("https://i.simonenko.xyz/talks/archive/holyjs.avif") type('image/avif') 2x,
        url("https://i.simonenko.xyz/talks/archive/holyjs-small.jpg") type('image/jpeg') 1x,
        url("https://i.simonenko.xyz/talks/archive/holyjs.jpg") type('image/jpeg') 2x
      );
      --art-width: 160px;
      --art-height: 144px;
      --art-top: 64px;
    }

    .talks-entry[data-illustration='space'] {
      --talk-illustration: image-set(
        url("https://i.simonenko.xyz/talks/archive/space-small.avif") type('image/avif') 1x,
        url("https://i.simonenko.xyz/talks/archive/space.avif") type('image/avif') 2x,
        url("https://i.simonenko.xyz/talks/archive/space-small.jpg") type('image/jpeg') 1x,
        url("https://i.simonenko.xyz/talks/archive/space.jpg") type('image/jpeg') 2x
      );
      --art-width: 144px;
      --art-height: 160px;
      --art-top: 0px;
    }

    .talks-entry[data-illustration='github'] {
      --talk-illustration: image-set(
        url("https://i.simonenko.xyz/talks/slides/github-art-small.avif") type('image/avif') 1x,
        url("https://i.simonenko.xyz/talks/slides/github-art.avif") type('image/avif') 2x,
        url("https://i.simonenko.xyz/talks/slides/github-art-small.jpg") type('image/jpeg') 1x,
        url("https://i.simonenko.xyz/talks/slides/github-art.jpg") type('image/jpeg') 2x
      );
      --art-top: -24px;
      --art-width: 120px;
      --art-height: 120px;
    }

    .talks-entry[data-illustration='teaching'] {
      --art-top: 16px;
      --art-width: 176px;
      --art-height: 132px;
      --talk-illustration: image-set(
        url("https://i.simonenko.xyz/talks/slides/teaching-art-small.avif") type('image/avif') 1x,
        url("https://i.simonenko.xyz/talks/slides/teaching-art.avif") type('image/avif') 2x,
        url("https://i.simonenko.xyz/talks/slides/teaching-art-small.jpg") type('image/jpeg') 1x,
        url("https://i.simonenko.xyz/talks/slides/teaching-art.jpg") type('image/jpeg') 2x
      );
    }

    .talks-entry[data-illustration='courses'] {
      --talk-illustration: image-set(
        url("https://i.simonenko.xyz/talks/slides/courses-art-small.avif") type('image/avif') 1x,
        url("https://i.simonenko.xyz/talks/slides/courses-art.avif") type('image/avif') 2x,
        url("https://i.simonenko.xyz/talks/slides/courses-art-small.jpg") type('image/jpeg') 1x,
        url("https://i.simonenko.xyz/talks/slides/courses-art.jpg") type('image/jpeg') 2x
      );
      --art-width: 136px;
      --art-height: 136px;
      --art-top: 48px;
    }

    .talks-entry[data-illustration='es6'] {
      --talk-illustration: image-set(
        url("https://i.simonenko.xyz/talks/slides/es6-cover-small.avif") type('image/avif') 1x,
        url("https://i.simonenko.xyz/talks/slides/es6-cover.avif") type('image/avif') 2x,
        url("https://i.simonenko.xyz/talks/slides/es6-cover-small.jpg") type('image/jpeg') 1x,
        url("https://i.simonenko.xyz/talks/slides/es6-cover.jpg") type('image/jpeg') 2x
      );
      --art-width: 176px;
      --art-height: 176px;
      --art-top: 0px;
    }

    .talks-entry[data-illustration='time'] {
      --talk-illustration: image-set(
        url("https://i.simonenko.xyz/talks/slides/time-cover-small.avif") type('image/avif') 1x,
        url("https://i.simonenko.xyz/talks/slides/time-cover.avif") type('image/avif') 2x,
        url("https://i.simonenko.xyz/talks/slides/time-cover-small.jpg") type('image/jpeg') 1x,
        url("https://i.simonenko.xyz/talks/slides/time-cover.jpg") type('image/jpeg') 2x
      );
      --art-width: 160px;
      --art-height: 160px;
      --art-top: 0px;
    }
  }

  @media (max-width: 950px) {
    .talks-pitercss,
    .talks-meetup {
      padding-inline-end: 0;
    }

    .talks-pitercss::before {
      display: none;
    }

    .talks-identity-hand {
      inline-size: 104px;
      inset-block-start: 72px;
      inset-inline-start: var(--space-32);
      inset-inline-end: auto;
    }

    .talks-intro,
    .talks-selected,
    .talks-podcasts,
    .talks-series,
    .talk-reading {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-24);
    }

    .talks-series {
      row-gap: var(--space-24);

      & > .talks-meta {
        margin-block-end: calc(-1 * var(--space-16));
      }
    }

    .talk-text {
      padding-inline-end: 0;
    }

    .talk-contents ol {
      columns: 2;
      column-gap: var(--space-32);

      & li {
        break-inside: avoid;
      }
    }
  }

  @media (max-width: 600px) {
    .talks-section {
      padding-block: var(--space-40);
    }

    .talks-year,
    .talks-conferences > div {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-8);
    }

    .talk-contents ol {
      columns: auto;
    }

    .talks-conferences > .talks-pitercss {
      padding-block-end: 184px;
    }

    .talks-identity-hand {
      inline-size: 64px;
      inset-inline-start: auto;
      inset-block-start: auto;
      inset-block-end: -16px;
      inset-inline-end: 24px;
      rotate: 24deg;
    }

    .talks-conferences > .talks-meetup {
      padding-block-end: 88px;
    }

    .talks-meetup::after {
      inline-size: 88px;
      block-size: 67px;
      inset-inline-end: 16px;
      inset-block-end: 0;
    }

    .talks-viruses {
      & picture:nth-child(1) img {
        inline-size: 88px;
        inset-inline-start: -8px;
        inset-block-end: 32px;
      }

      & picture:nth-child(2) img,
      & picture:nth-child(5) img {
        display: none;
      }

      & picture:nth-child(3) img {
        inline-size: 48px;
        inset-inline-start: 28%;
        inset-block-end: 24px;
      }

      & picture:nth-child(4) img {
        inline-size: 72px;
        inset-inline-start: 49%;
        inset-block-end: 20px;
      }

      & picture:nth-child(6) img {
        inline-size: 72px;
        inset-inline-start: 76%;
        inset-block-end: 32px;
      }
    }
  }
}