@layer reset, theme, components, pages;

/* ==================================================
   Reset
================================================== */

@layer reset {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :where(html,
    body,
    ul,
    h1,
    h2,
    h3,
    p,
    figure,
    hr) {
    margin: 0;
    padding: 0;
  }

  :where(ul) {
    list-style: none;
  }

  :where(img, svg) {
    display: block;
    max-inline-size: 100%;
  }

  :where(a) {
    color: inherit;
    text-decoration: none;
  }

  :where(button, input, textarea, select) {
    font: inherit;
  }
}

/* ==================================================
   Theme
================================================== */

@layer theme {
  :root {
    /* Colors */
    --charcoal: #363730;
    --sage: #65695e;
    --stone: #a8a297;
    --warm: #e2d9d1;
    --lilac: #c8b6c8;
    --plum: #6f586d;
    --taupe: #b7b3aa;
    --soft-stone: #cecbc5;
    --ivory: #faf8f6;
    --soft-lilac: #f4f0f4;
    --white: #fdfdfd;

    /* Semantic colors */
    --page: var(--white);
    --surface: var(--white);
    --surface-soft: var(--soft-lilac);
    --text: var(--charcoal);
    --text-soft: var(--sage);
    --primary: var(--plum);
    --selected: var(--lilac);
    --outline: var(--stone);

    /* Layout */
    --content-max: 75rem;
    --page-gap: clamp(1rem, 4vw, 4rem);

    /* Header */
    --header-height: clamp(7rem, 12vw, 10rem);
    --header-gap: clamp(1.5rem, 5vw, 5rem);
    --logo-size: clamp(5.5rem, 8vw, 7rem);

    /* Navigation */
    --nav-gap: clamp(0.25rem, 1.5vw, 1.5rem);
    --nav-height: 2.5rem;
    --nav-padding: clamp(0.8rem, 2vw, 1.5rem);
    --nav-font: clamp(0.75rem,
        0.7rem + 0.2vw,
        0.875rem);

    /* Shape and motion */
    --pill: 100vmax;
    --speed: 150ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);
  }

  html {
    color-scheme: light;

    font-family:
      Inter,
      Roboto,
      system-ui,
      sans-serif;
  }

  body {
    min-block-size: 100dvh;

    background: var(--page);
    color: var(--text);
  }
}

/* ==================================================
   Shared components
================================================== */

@layer components {
  /* Header */

  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--header-gap);

    inline-size: min(calc(100% - 2 * var(--page-gap)),
        var(--content-max));

    min-block-size: var(--header-height);
    margin-inline: auto;
  }

  .site-logo {
    flex: none;

    & img {
      inline-size: var(--logo-size);
      block-size: auto;
    }
  }

  /* Navigation */

  .site-nav {
    & ul {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--nav-gap);
    }

    & li {
      flex: none;
    }

    & a {
      position: relative;
      isolation: isolate;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      min-block-size: var(--nav-height);
      padding-inline: var(--nav-padding);

      border-radius: var(--pill);

      color: var(--text);

      font-size: var(--nav-font);
      font-weight: 500;
      line-height: 1;
      white-space: nowrap;

      transition:
        background-color var(--speed) var(--ease),
        color var(--speed) var(--ease);

      &::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: -1;

        border-radius: inherit;

        background: currentColor;
        opacity: 0;

        transition: opacity var(--speed) var(--ease);
      }

      &[aria-current="page"] {
        background: var(--selected);
        color: var(--text);
      }

      &:focus-visible {
        outline: 0.125rem solid var(--primary);
        outline-offset: 0.125rem;

        &::before {
          opacity: 0.12;
        }
      }
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .site-nav a:hover::before {
      opacity: 0.08;
    }
  }

  /* Buttons */

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    min-block-size: 2.5rem;
    padding-inline: 1.25rem;

    border-radius: var(--pill);

    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    transition:
      background-color var(--speed) var(--ease),
      color var(--speed) var(--ease),
      transform var(--speed) var(--ease);

    &>img,
    &>svg {
      flex: none;

      inline-size: 1rem;
      block-size: 1rem;

      object-fit: contain;
    }

    &[data-variant="tonal"] {
      background: var(--selected);
      color: var(--text);
    }

    &[data-variant="filled"] {
      background: var(--primary);
      color: var(--white);
    }

    &:focus-visible {
      outline: 0.125rem solid var(--primary);
      outline-offset: 0.2rem;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .button:hover {
      transform: translateY(-0.08rem);
    }

    .button[data-variant="tonal"]:hover {
      background: color-mix(in srgb,
          var(--selected),
          var(--primary) 12%);
    }

    .button[data-variant="filled"]:hover {
      background: color-mix(in srgb,
          var(--primary),
          var(--charcoal) 10%);
    }
  }

  /* Responsive header */

  @media (width <=48rem) {
    .site-header {
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: clamp(1rem, 4vw, 2rem);

      min-block-size: auto;
      padding-block: clamp(1.5rem, 6vw, 3rem);
    }

    .site-logo {
      align-self: center;
    }

    .site-nav {
      inline-size: 100%;
      overflow-x: auto;

      scrollbar-width: none;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline proximity;

      &::-webkit-scrollbar {
        display: none;
      }

      & ul {
        inline-size: max-content;
        min-inline-size: 100%;

        justify-content: center;
        gap: clamp(0.25rem, 1.5vw, 0.75rem);
      }

      & li {
        scroll-snap-align: center;
      }

      & a {
        min-block-size: 2.25rem;
        padding-inline: clamp(0.7rem, 2vw, 1rem);

        font-size: clamp(0.75rem,
            2.8vw,
            0.875rem);
      }
    }
  }

  @media (width <=24rem) {
    .site-nav {
      & ul {
        justify-content: flex-start;
      }

      & a {
        min-block-size: 2rem;
        padding-inline: 0.7rem;

        font-size: 0.75rem;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {

    .site-nav a,
    .site-nav a::before,
    .button {
      transition: none;
    }
  }
}

/* ==================================================
   Home page
================================================== */

@layer pages {
  .home-page {
    --content: var(--content-max);
    --gutter: var(--page-gap);

    --section-gap: clamp(4rem, 9vw, 8rem);
    --portrait-size: clamp(18rem, 35vw, 31rem);
    --copy-width: 38rem;

    --story-left-radius: clamp(5rem, 12vw, 12rem);
    --story-right-radius: clamp(0.5rem, 1vw, 0.9rem);

    --path-column-gap: clamp(2rem, 5vw, 4rem);
    --path-title-gap: clamp(2.5rem, 5vw, 4rem);
    --path-icon-gap: clamp(1.25rem, 2vw, 1.75rem);
    --path-copy-gap: clamp(0.6rem, 1vw, 0.85rem);

    --path-icon-circle: clamp(4.25rem, 5.5vw, 5.25rem);
    --path-icon-size: clamp(2.25rem, 3vw, 3rem);

    background: var(--surface);
    color: var(--text);

    :where(h1, h2, h3, p) {
      text-wrap: pretty;
    }

    :where(h1, h2) {
      color: var(--sage);

      font-family:
        Georgia,
        "Times New Roman",
        serif;

      font-weight: 400;
    }

    h1 {
      font-size: clamp(2.25rem,
          2rem + 2.5vw,
          4rem);

      line-height: 1.05;
    }

    h2 {
      font-size: clamp(1.4rem,
          1.15rem + 1vw,
          2rem);

      line-height: 1.2;
    }

    h3 {
      font-size: clamp(0.9rem,
          0.85rem + 0.15vw,
          1rem);

      line-height: 1.35;
    }

    p {
      line-height: 1.6;
    }
  }

  /* Shared page width */

  .intro-section,
  .path-section,
  .story-section>div,
  .contact-section>div {
    inline-size: min(calc(100% - 2 * var(--gutter)),
        var(--content));

    margin-inline: auto;
  }

  /* ==================================================
     Intro
  ================================================== */

  .intro-section {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr) minmax(min-content, var(--portrait-size));

    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);

    padding-block:
      clamp(3rem, 7vw, 7rem) var(--section-gap);

    &>div {
      grid-column: 1;
      grid-row: 1;

      max-inline-size: var(--copy-width);

      &>[data-eyebrow] {
        margin-block-end: 0.6rem;

        color: var(--plum);

        font-size: clamp(0.85rem,
            0.8rem + 0.2vw,
            1rem);

        letter-spacing: 0.02em;
        text-transform: uppercase;
      }

      &>[data-lead] {
        max-inline-size: 28rem;
        margin-block-start: 1.25rem;

        color: var(--plum);

        font-size: clamp(1.1rem,
            0.95rem + 0.6vw,
            1.5rem);

        line-height: 1.35;
      }

      &>hr {
        inline-size: clamp(2.5rem, 5vw, 4rem);
        block-size: 0;

        margin-block: clamp(1.5rem,
            3vw,
            2.5rem);

        border: 0;
        border-block-start:
          0.0625rem solid var(--soft-stone);
      }

      &>[data-copy] {
        max-inline-size: 34rem;

        font-size: clamp(0.85rem,
            0.8rem + 0.15vw,
            1rem);
      }
    }

    &>figure {
      position: relative;
      isolation: isolate;

      grid-column: 2;
      grid-row: 1;
      justify-self: end;

      inline-size: var(--portrait-size);
      aspect-ratio: 1;

      &>img {
        inline-size: 88%;
        block-size: 88%;

        object-fit: cover;
        border-radius: 50%;
      }

      &>[data-circle] {
        position: absolute;
        z-index: 1;

        display: block;

        aspect-ratio: 1;
        border-radius: 50%;

        pointer-events: none;
      }

      &>[data-circle="plum"] {
        inset-inline-end: 2%;
        inset-block-end: 23%;

        inline-size: 29%;

        background: color-mix(in srgb,
            var(--plum) 88%,
            transparent);
      }

      &>[data-circle="stone"] {
        inset-inline-end: 8%;
        inset-block-end: 4%;

        inline-size: 35%;

        background: color-mix(in srgb,
            var(--stone) 75%,
            transparent);
      }
    }
  }

  /* ==================================================
     Mein Weg
  ================================================== */

  .path-section {
    padding-block-end: var(--section-gap);

    &>h2 {
      margin-block-end: var(--path-title-gap);

      color: var(--text);
      font-family: inherit;
      font-weight: 600;
    }

    &>div {
      display: grid;
      grid-template-columns:
        repeat(3, minmax(0, 1fr));

      gap: var(--path-column-gap);

      &>article {
        position: relative;

        min-inline-size: 0;

        &>figure {
          display: grid;
          place-items: center;

          inline-size: var(--path-icon-circle);
          aspect-ratio: 1;

          margin-block-end: var(--path-icon-gap);

          border-radius: 50%;

          &[data-tone="warm"] {
            background: var(--warm);
          }

          &[data-tone="lilac"] {
            background: var(--lilac);
          }

          &[data-tone="stone"] {
            background: var(--soft-stone);
          }

          &>img,
          &>svg {
            inline-size: var(--path-icon-size);
            block-size: var(--path-icon-size);

            object-fit: contain;
          }
        }

        &>h3 {
          margin-block-end: var(--path-copy-gap);

          color: var(--text);
          font-weight: 600;
        }

        &>p {
          max-inline-size: 32rem;

          font-size: clamp(0.8rem,
              0.76rem + 0.12vw,
              0.9rem);
        }

        &:not(:last-child)::after {
          content: "";

          position: absolute;

          inset-block-start: calc(var(--path-icon-circle) + var(--path-icon-gap));

          inset-block-end: 0;

          inset-inline-end: calc(var(--path-column-gap) / -2);

          inline-size: 0.0625rem;

          background: var(--soft-stone);
        }
      }
    }
  }

  /* ==================================================
     Was mich prägt
  ================================================== */

  .story-section {
    background: var(--ivory);

    &>div {
      display: grid;
      grid-template-columns:
        minmax(0, 1fr) minmax(19rem, 1fr);

      align-items: center;
      gap: clamp(3rem, 7vw, 7rem);

      padding-block: clamp(3rem, 6vw, 6rem);

      &>div {
        grid-column: 1;
        grid-row: 1;

        display: grid;
        justify-items: start;

        max-inline-size: var(--copy-width);

        &>h2 {
          margin-block-end: clamp(1.75rem,
              3vw,
              2.5rem);

          color: var(--text);
          font-family: inherit;
          font-weight: 600;

          &::after {
            content: "";

            display: block;

            inline-size: clamp(2.5rem,
                5vw,
                4rem);

            block-size: 0.0625rem;

            margin-block-start: clamp(1rem,
                2vw,
                1.5rem);

            background: var(--soft-stone);
          }
        }

        &>p {
          font-size: clamp(0.85rem,
              0.8rem + 0.15vw,
              0.95rem);

          &+p {
            margin-block-start: clamp(1rem,
                2vw,
                1.5rem);
          }
        }

        &>.button {
          margin-block-start: clamp(1.75rem,
              3vw,
              2.5rem);
        }
      }

      &>figure {
        grid-column: 2;
        grid-row: 1;

        overflow: clip;
        align-self: stretch;

        min-block-size: clamp(22rem,
            35vw,
            32rem);

        border-start-start-radius:
          var(--story-left-radius);

        border-end-start-radius:
          var(--story-left-radius);

        border-start-end-radius:
          var(--story-right-radius);

        border-end-end-radius:
          var(--story-right-radius);

        &>img {
          inline-size: 100%;
          block-size: 100%;

          object-fit: cover;
        }
      }
    }
  }

  /* ==================================================
     Contact
  ================================================== */

  .contact-section {
    background: var(--soft-lilac);

    &>div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(2rem, 6vw, 6rem);

      padding-block: clamp(2rem, 4vw, 3rem);

      &>div {
        &>h2 {
          margin-block-end: 0.75rem;

          color: var(--text);
          font-family: inherit;
          font-weight: 600;
        }

        &>p {
          max-inline-size: 42rem;

          font-size: clamp(0.85rem,
              0.8rem + 0.15vw,
              0.95rem);
        }
      }
    }
  }

  /* ==================================================
     Tablet
  ================================================== */

  @media (width <=52rem) {
    .home-page {
      --story-left-radius:
        clamp(3rem, 12vw, 6rem);

      --story-right-radius:
        clamp(0.45rem, 1.5vw, 0.8rem);

      --path-column-gap:
        clamp(2rem, 7vw, 4rem);

      --path-icon-circle:
        clamp(4rem, 10vw, 4.75rem);

      --path-icon-size:
        clamp(2.1rem, 6vw, 2.7rem);
    }

    .intro-section {
      grid-template-columns: 1fr;

      &>figure {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
      }

      &>div {
        grid-column: 1;
        grid-row: 2;

        max-inline-size: 100%;
      }
    }

    .path-section {
      &>div {
        grid-template-columns:
          repeat(2, minmax(0, 1fr));

        row-gap: clamp(3rem, 8vw, 5rem);

        &>article:nth-child(2)::after,
        &>article:nth-child(3)::after {
          display: none;
        }
      }
    }

    .story-section {
      &>div {
        grid-template-columns: 1fr;

        &>div {
          grid-column: 1;
          grid-row: 1;

          max-inline-size: 100%;
        }

        &>figure {
          grid-column: 1;
          grid-row: 2;

          min-block-size: auto;
          aspect-ratio: 4 / 3;

          border-start-start-radius:
            var(--story-right-radius);

          border-end-start-radius:
            var(--story-left-radius);

          border-start-end-radius:
            var(--story-right-radius);

          border-end-end-radius:
            var(--story-left-radius);
        }
      }
    }

    .contact-section {
      &>div {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  }

  /* ==================================================
     Mobile
  ================================================== */

  @media (width <=38rem) {
    .home-page {
      --section-gap:
        clamp(3rem, 14vw, 5rem);

      --portrait-size:
        min(85vw, 24rem);

      --story-left-radius:
        clamp(2.5rem, 16vw, 5rem);

      --story-right-radius:
        clamp(0.4rem, 2vw, 0.75rem);

      --path-title-gap:
        clamp(2.5rem, 10vw, 3.5rem);

      --path-icon-gap: 1.25rem;
      --path-copy-gap: 0.65rem;

      --path-icon-circle:
        clamp(4rem, 16vw, 4.75rem);

      --path-icon-size:
        clamp(2.1rem, 9vw, 2.75rem);
    }

    .intro-section {
      gap: 2.5rem;
      padding-block-start: 2rem;
    }

    .path-section {
      &>div {
        grid-template-columns: 1fr;
        gap: 0;

        &>article {
          padding-block:
            clamp(2rem, 8vw, 3rem);

          border-block-end:
            0.0625rem solid var(--soft-stone);

          &:first-child {
            padding-block-start: 0;
          }

          &:last-child {
            padding-block-end: 0;
            border-block-end: 0;
          }

          &::after {
            display: none;
          }
        }
      }
    }

    .story-section {
      &>div {
        &>figure {
          aspect-ratio: 1;

          border-start-start-radius:
            var(--story-right-radius);

          border-end-start-radius:
            var(--story-left-radius);

          border-start-end-radius:
            var(--story-right-radius);

          border-end-end-radius:
            var(--story-left-radius);
        }
      }
    }

    .contact-section {
      & .button {
        inline-size: 100%;
      }
    }
  }
}

@layer pages {
  .contact-page {
    inline-size: min(calc(100% - 2 * var(--page-gap)), var(--content-max));
    margin-inline: auto;
    padding-block: clamp(2rem, 5vw, 5rem) clamp(4rem, 9vw, 8rem);
  }

  .contact-page-header {
    max-inline-size: 48rem;
    margin-block-end: clamp(3rem, 7vw, 6rem);

    [data-eyebrow] {
      margin-block-end: 0.65rem;
      color: var(--plum);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    h1 {
      color: var(--sage);
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.25rem, 1.8rem + 2.6vw, 4.25rem);
      font-weight: 400;
      line-height: 1.08;
      text-wrap: balance;
    }

    >p:last-child {
      max-inline-size: 42rem;
      margin-block-start: 1.5rem;
      color: var(--text-soft);
      font-size: clamp(0.9rem, 0.84rem + 0.2vw, 1rem);
      line-height: 1.65;
      text-wrap: pretty;
    }
  }

  .contact-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(17rem, 0.85fr);
    align-items: start;
    gap: clamp(3rem, 7vw, 7rem);
  }

  .contact-form {
    display: grid;
    gap: 1.35rem;

    >.button {
      justify-self: start;
      border: 0;
      cursor: pointer;
    }
  }

  .contact-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
  }

  .form-field {
    display: grid;
    gap: 0.5rem;

    label {
      font-size: 0.82rem;
      font-weight: 600;

      span {
        color: var(--text-soft);
        font-weight: 400;
      }
    }

    :where(input, select, textarea) {
      inline-size: 100%;
      border: 0.0625rem solid var(--soft-stone);
      border-radius: 0.55rem;
      background: var(--ivory);
      color: var(--text);
      font-size: 0.9rem;
      outline: none;
      transition:
        border-color var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease),
        background-color var(--speed) var(--ease);

      &:focus {
        border-color: var(--primary);
        background: var(--white);
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--lilac) 35%, transparent);
      }
    }

    :where(input, select) {
      min-block-size: 3rem;
      padding-inline: 0.9rem;
    }

    textarea {
      min-block-size: 11rem;
      padding: 0.85rem 0.9rem;
      line-height: 1.55;
      resize: vertical;
    }
  }

  .contact-form-note {
    max-inline-size: 44rem;
    color: var(--text-soft);
    font-size: 0.75rem;
    line-height: 1.55;
  }

  .contact-direct {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 0.0625rem solid color-mix(in srgb, var(--lilac) 58%, transparent);
    border-radius: 0.8rem;
    background: var(--soft-lilac);

    h2 {
      margin-block-end: 0.75rem;
      font-size: 1rem;
      line-height: 1.3;
    }

    p {
      font-size: 0.84rem;
      line-height: 1.65;
    }

    a {
      display: inline-block;
      color: var(--primary);
      font-size: 0.86rem;
      font-weight: 650;
      text-decoration: underline;
      text-underline-offset: 0.2rem;

      &:focus-visible {
        border-radius: 0.15rem;
        outline: 0.125rem solid var(--primary);
        outline-offset: 0.25rem;
      }
    }

    hr {
      margin-block: 2rem;
      border: 0;
      border-block-start: 0.0625rem solid var(--soft-stone);
    }
  }

  .contact-details {
    display: grid;
    gap: 1rem;
    margin-block-start: 1.5rem;
    font-style: normal;

    >div {
      display: grid;
      gap: 0.2rem;

      >span {
        color: var(--text-soft);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
    }
  }

  @media (width <=52rem) {
    .contact-page-layout {
      grid-template-columns: 1fr;
    }

    .contact-direct {
      max-inline-size: 38rem;
    }
  }

  @media (width <=38rem) {
    .contact-form-row {
      grid-template-columns: 1fr;
    }

    .contact-form>.button {
      inline-size: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .form-field :where(input, select, textarea) {
      transition: none;
    }
  }

  .about-page {
    padding-block: clamp(2rem, 5vw, 5rem) clamp(4rem, 9vw, 8rem);

    >article {
      display: grid;
      grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr);
      align-items: start;
      gap: clamp(2.5rem, 6vw, 5rem);

      inline-size: min(calc(100% - 2 * var(--page-gap)), var(--content-max));
      margin-inline: auto;

      >.about-profile-media {
        position: sticky;
        inset-block-start: 2rem;

        >figure {
          overflow: clip;
          aspect-ratio: 1;
          border-radius: clamp(1.5rem, 4vw, 3rem);

          >img {
            inline-size: 100%;
            block-size: 100%;
            object-fit: cover;
          }
        }

        >a {
          display: block;
          inline-size: min(42%, 7.5rem);
          margin-block-start: 1.25rem;
          margin-inline: auto;

          >img {
            display: block;
            inline-size: 100%;
            block-size: auto;
          }
        }
      }

      >div {
        max-inline-size: 56rem;

        >header {
          margin-block-end: 1rem;

          [data-eyebrow] {
            margin-block-end: 0.45rem;
            color: var(--plum);
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
          }

          >h1 {
            color: var(--sage);
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3.5rem);
            font-weight: 400;
            line-height: 1.1;
          }
        }

        >p {
          font-size: clamp(0.85rem, 0.8rem + 0.15vw, 0.95rem);
          line-height: 1.65;
          text-align: justify;
          text-wrap: pretty;
          hyphens: auto;

          &+p {
            margin-block-start: 1.25rem;
          }
        }

        >.button {
          margin-block-start: clamp(2rem, 4vw, 3rem);
        }
      }
    }
  }

  @media (width <=48rem) {
    .about-page>article {
      grid-template-columns: 1fr;

      >.about-profile-media {
        position: static;
        inline-size: min(75vw, 22rem);
        margin-inline: auto;
      }
    }
  }

  @media (width <=38rem) {
    .about-page>article>div>.button {
      inline-size: 100%;
    }
  }

  .visually-hidden {
    position: absolute;

    inline-size: 0.0625rem;
    block-size: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;

    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .offer-page {
    --card-min: 18rem;
    --card-radius: clamp(0.65rem, 1vw, 0.9rem);
    --card-gap: clamp(2rem, 5vw, 4rem);
    --card-border: color-mix(in srgb,
        var(--lilac) 58%,
        transparent);

    background: var(--surface);
    color: var(--text);

    padding-block:
      clamp(1.5rem, 4vw, 3rem) clamp(4rem, 9vw, 8rem);

    >section {
      display: grid;
      grid-template-columns:
        repeat(auto-fit,
          minmax(min(100%, var(--card-min)), 1fr));

      align-items: stretch;
      gap: var(--card-gap);

      inline-size: min(calc(100% - 2 * var(--page-gap)),
          var(--content-max));

      margin-inline: auto;
    }

    article {
      display: grid;
      grid-template-rows: auto 1fr;

      min-inline-size: 0;
      overflow: clip;

      border: 0.0625rem solid var(--card-border);
      border-radius: var(--card-radius);

      background: var(--ivory);

      transition:
        translate var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease),
        border-color var(--speed) var(--ease);

      >figure {
        overflow: clip;
        aspect-ratio: 16 / 8;
        margin: 0;

        border-start-start-radius: calc(var(--card-radius) - 0.0625rem);

        border-start-end-radius: calc(var(--card-radius) - 0.0625rem);

        >img {
          inline-size: 100%;
          block-size: 100%;

          object-fit: cover;

          transition:
            scale 400ms var(--ease);
        }
      }

      >div {
        display: grid;
        grid-template-rows: auto 1fr auto;
        align-items: start;

        min-block-size: clamp(14rem, 20vw, 17rem);
        padding: clamp(1rem, 2vw, 1.4rem);

        >header {
          margin-block-end: clamp(1.25rem, 2.5vw, 2rem);

          >h2 {
            margin: 0;

            color: var(--text);
            font-family: inherit;
            font-size: clamp(0.95rem,
                0.88rem + 0.25vw,
                1.1rem);

            font-weight: 650;
            line-height: 1.3;
            text-wrap: balance;
          }

          >p {
            margin-block-start: 0.2rem;

            color: var(--text);
            font-size: clamp(0.85rem,
                0.8rem + 0.15vw,
                0.95rem);

            line-height: 1.35;
          }
        }

        >p {
          max-inline-size: 36rem;

          color: var(--text);
          font-size: clamp(0.78rem,
              0.73rem + 0.14vw,
              0.88rem);

          line-height: 1.55;
          text-wrap: pretty;
        }

        >a {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          justify-self: end;
          gap: 0.45rem;

          min-block-size: 2.5rem;
          margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
          padding-inline: 1rem;

          border-radius: var(--pill);

          background: var(--primary);
          color: var(--white);

          font-size: 0.78rem;
          font-weight: 600;
          line-height: 1;
          white-space: nowrap;

          transition:
            background-color var(--speed) var(--ease),
            translate var(--speed) var(--ease);

          >svg {
            inline-size: 0.9rem;
            block-size: 0.9rem;

            transition:
              translate var(--speed) var(--ease);
          }

          &:focus-visible {
            outline: 0.125rem solid var(--primary);
            outline-offset: 0.2rem;
          }
        }
      }
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .offer-page article:hover {
      translate: 0 -0.2rem;

      border-color: color-mix(in srgb,
          var(--plum) 36%,
          var(--card-border));

      box-shadow:
        0 0.25rem 0.75rem color-mix(in srgb,
          var(--charcoal) 8%,
          transparent);

      >figure img {
        scale: 1.025;
      }
    }

    .offer-page article>div>a:hover {
      background: color-mix(in srgb,
          var(--primary),
          var(--charcoal) 10%);

      translate: 0 -0.08rem;

      >svg {
        translate: 0.15rem 0;
      }
    }
  }

  @media (width <=64rem) {
    .offer-page {
      --card-min: 17rem;
      --card-gap: clamp(1.5rem, 4vw, 3rem);

      >section {
        grid-template-columns:
          repeat(2, minmax(0, 1fr));
      }

      article {
        >figure {
          aspect-ratio: 16 / 8.5;
        }
      }
    }
  }

  @media (width <=42rem) {
    .offer-page {
      padding-block-start: 1rem;

      >section {
        grid-template-columns: 1fr;
      }

      article {
        max-inline-size: 34rem;
        inline-size: 100%;
        margin-inline: auto;

        >figure {
          aspect-ratio: 16 / 9;
        }

        >div {
          min-block-size: auto;

          >a {
            justify-self: start;
          }
        }
      }
    }
  }

  @media (width <=24rem) {
    .offer-page article {
      >figure {
        aspect-ratio: 4 / 3;
      }

      >div {
        padding: 1rem;

        >a {
          inline-size: 100%;
        }
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .offer-page {

      article,
      article img,
      article>div>a,
      article>div>a svg {
        transition: none;
      }
    }
  }
}

/* ==================================================
   Offer detail pages
================================================== */

@layer pages {
  .offer-detail-page {
    --detail-content: 68rem;
    --detail-copy: 46rem;
    --detail-radius: clamp(3rem, 9vw, 8rem);

    background: var(--surface);
    color: var(--text);

    :where(h1, h2, p, li) {
      text-wrap: pretty;
    }
  }

  .offer-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);

    inline-size: min(calc(100% - 2 * var(--page-gap)), var(--content-max));
    margin-inline: auto;
    padding-block: clamp(2rem, 5vw, 5rem) clamp(4rem, 8vw, 7rem);

    >div {
      max-inline-size: 40rem;
    }

    [data-eyebrow] {
      margin-block-end: 0.75rem;

      color: var(--plum);
      font-size: clamp(0.78rem, 0.73rem + 0.18vw, 0.9rem);
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    h1 {
      color: var(--sage);
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.25rem, 1.8rem + 2.8vw, 4.5rem);
      font-weight: 400;
      line-height: 1.05;
    }

    [data-lead] {
      max-inline-size: 35rem;
      margin-block-start: clamp(1.25rem, 2.5vw, 2rem);

      color: var(--plum);
      font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem);
      line-height: 1.5;
    }

    >figure {
      overflow: clip;
      aspect-ratio: 4 / 3;

      border-start-start-radius: var(--detail-radius);
      border-end-start-radius: var(--detail-radius);
      border-start-end-radius: 0.75rem;
      border-end-end-radius: 0.75rem;

      >img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
      }
    }
  }

  .offer-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    margin-block-end: clamp(2rem, 4vw, 3.5rem);

    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 600;

    &::before {
      content: "←";
      font-size: 1rem;
      transition: translate var(--speed) var(--ease);
    }

    &:focus-visible {
      border-radius: 0.2rem;
      outline: 0.125rem solid var(--primary);
      outline-offset: 0.25rem;
    }
  }

  .offer-detail-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 6vw, 5rem);

    inline-size: min(calc(100% - 2 * var(--page-gap)), var(--detail-content));
    margin-inline: auto;
    padding-block-end: clamp(4rem, 9vw, 8rem);

    >section {
      padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
      border-block-start: 0.0625rem solid var(--soft-stone);

      &:first-child {
        grid-column: 1 / -1;
        max-inline-size: var(--detail-copy);
      }

      >h2 {
        margin-block-end: 1.25rem;

        color: var(--text);
        font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem);
        font-weight: 650;
        line-height: 1.3;
      }

      >p,
      >ul {
        color: var(--text);
        font-size: clamp(0.85rem, 0.8rem + 0.15vw, 0.95rem);
        line-height: 1.7;
      }

      >p+p {
        margin-block-start: 1rem;
      }

      >ul {
        display: grid;
        gap: 0.75rem;
        padding-inline-start: 1.15rem;
        list-style: disc;

        >li::marker {
          color: var(--plum);
        }
      }
    }
  }

  .offer-detail-contact {
    background: var(--soft-lilac);

    >div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(2rem, 6vw, 6rem);

      inline-size: min(calc(100% - 2 * var(--page-gap)), var(--content-max));
      margin-inline: auto;
      padding-block: clamp(2.25rem, 5vw, 3.5rem);

      >div {
        max-inline-size: 42rem;

        >h2 {
          margin-block-end: 0.75rem;
          font-size: clamp(1.15rem, 1rem + 0.45vw, 1.45rem);
          line-height: 1.3;
        }

        >p {
          font-size: clamp(0.85rem, 0.8rem + 0.15vw, 0.95rem);
          line-height: 1.6;
        }
      }
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .offer-detail-back:hover::before {
      translate: -0.15rem 0;
    }
  }

  @media (width <=52rem) {
    .offer-detail-hero {
      grid-template-columns: 1fr;

      >div {
        max-inline-size: 100%;
      }

      >figure {
        aspect-ratio: 16 / 10;
      }
    }
  }

  @media (width <=38rem) {
    .offer-detail-hero {
      gap: 2.5rem;
      padding-block-start: 1.5rem;

      >figure {
        aspect-ratio: 4 / 3;
        border-start-start-radius: 0.6rem;
        border-end-start-radius: var(--detail-radius);
        border-start-end-radius: 0.6rem;
        border-end-end-radius: var(--detail-radius);
      }
    }

    .offer-detail-content {
      grid-template-columns: 1fr;

      >section:first-child {
        grid-column: auto;
      }
    }

    .offer-detail-contact>div {
      flex-direction: column;
      align-items: flex-start;

      >.button {
        inline-size: 100%;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .offer-detail-back::before {
      transition: none;
    }
  }
}