@layer theme, base, components, utilities;

@import url('theme.css') layer(theme);
@import url('preflight.css') layer(base);

@layer theme {
  :root {
    --font-sans: "Gill Sans", "Gill Sans MT", Calibri,
      ui-sans-serif, system-ui, sans-serif,
      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --default-transition-duration: 300ms;

    --color-primary: #3f484b;
    --color-primary--tint: #fafafa;
    --color-accent: #811313;
    --color-accent--tint: #e0cfbf;

    --line-thin: 1px;
    --line-medium: 2px;
    --line-thick: 4px;

    --content-width: 70rem;
    --content-padding: calc(var(--spacing) * 6);
    --reading-width: 44rem;
  }

  @media (min-width: 32rem) {
    :root { --content-padding: calc(var(--spacing) * 8); }
  }

  @media (min-width: 48rem) {
    :root { --content-padding: calc(var(--spacing) * 10); }
  }
}

@layer base {
  :root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: var(--font-weight-light);
  }

  html {
    color: var(--color-primary);
    background-color: var(--color-primary--tint);
  }

  a {
    color: var(--color-accent);
  }
}

@layer components {
  .page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
  }

  .header {
    background-color: var(--color-accent--tint);
  }

  .logo {
    width: clamp(16rem, 448px, 100%);
    margin-inline: auto;
    padding-inline: calc(var(--spacing) * 2);

    &:is(.hero--compact *) {
      max-width: 400px;
    }
  }

  .hero {
    height: clamp(15rem, 35vw, 384px);
    max-width: var(--container-7xl);
    margin-inline: auto;
    padding-block: calc(var(--spacing) * 6);
    background-image: url("/assets/hero.jpg");
    background-size: cover;
    background-position: center;
  }
  .hero--compact {
    max-height: 13rem;
  }

  .nav {
    container-type: inline-size;
    display: flex;
    position: sticky;
    z-index: 1;
    top: 0;
    overflow-x: auto;
    background-color: var(--color-white);
    box-shadow: var(--shadow-2xs);
  }
  .nav__items {
    display: flex;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    margin-inline: auto;
  }
  .nav__link {
    display: block;
    position: relative;
    color: var(--color-primary);
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    padding-block: calc(var(--spacing) * 3.5);
    padding-inline: calc(var(--spacing) * 2);

    @container (width > 38rem) {
      font-size: var(--text-lg);
      line-height: var(--text-lg--line-height);
      padding-block: calc(var(--spacing) * 4);
      padding-inline: calc(var(--spacing) * 4);
    }

    &::before, &::after {
      --width: calc(var(--spacing) * 6);
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: calc(var(--width) * -.5);
      width: 0;
      height: var(--line-medium);
      transition: width
        var(--default-transition-timing-function)
        var(--default-transition-duration);
    }

    &::before {
      background-color: var(--color-accent--tint);
    }

    &::after {
      background-color: var(--color-accent);
    }

    &:is(.is-within *)::before,
    &:is(
      :hover,
      .is-active:not(:has(&:hover) *) *,
    )::after {
      width: calc(var(--width));
    }
  }

  .main {
    display: block;
    container-type: inline-size;
    /* Intrinic width caused by container-type collapse. */
    width: 100%;
    flex-grow: 1;
    max-width: var(--content-width);
    margin-inline: auto;
    padding: var(--content-padding);
    min-height: var(--container-xs);
  }

  .panel {
    background-color: var(--color-white);
    padding-block: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    box-shadow: var(--shadow-xs);
    border-radius: var(--radius-md);
  }

  .heading {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
    font-weight: var(--font-weight-semibold);
    padding-bottom: var(--spacing);
    margin-bottom: calc(var(--spacing) * 4);

    &::after {
      content: "";
      display: block;
      width: calc(var(--spacing) * 10);
      height: var(--line-medium);
      margin-top: calc(var(--spacing) * 4);
      background-color: var(--color-accent);
    }
  }

  .subheading {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-semibold);
    margin-bottom: calc(var(--spacing) * 3);

    &::after {
      content: "";
      display: block;
      width: calc(var(--spacing) * 6);
      height: var(--line-medium);
      margin-top: calc(var(--spacing) * 3);
      background-color: var(--color-accent);
    }
  }

  .bulleted {
    list-style-type: disc;
    list-style-position: outside;
    padding-inline-start: calc(var(--spacing) * 7);
  }

  .numbered {
    list-style-type: decimal;
    list-style-position: outside;
    padding-inline-start: calc(var(--spacing) * 7);
  }

  .image {
    border-radius: var(--radius-sm);
  }

  .link {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: var(--spacing);
    transition: text-decoration-color
      var(--default-transition-timing-function)
      var(--default-transition-duration);

    &:hover {
      text-decoration-color: var(--color-accent--tint);
    }
  }

  .entry {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    gap: calc(var(--spacing) * 4);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 5);
    box-shadow: var(--shadow-xs);
    border-radius: var(--radius-md);
    transition: box-shadow
      var(--default-transition-timing-function)
      var(--default-transition-duration);

    &:has(.entry__logo) {
      padding-top: 0;
      margin-top: calc(var(--spacing) * 14);
    }

    &:not(.is-current):hover {
      box-shadow: var(--shadow-sm);
    }

    &.is-current {
      outline: var(--line-medium) solid var(--color-accent--tint);
      outline-offset: calc(var(--line-medium) * -1);
    }
  }
  .entry__logo {
    position: relative;
    top: 0;
    max-width: calc(var(--spacing) * 34);
    border-radius: 50%;
    border: var(--spacing) solid var(--color-white);
    margin-inline: auto;
    margin-top: calc(var(--spacing) * -14);
    box-shadow: var(--shadow-sm);
    transition: top
        var(--default-transition-timing-function)
        var(--default-transition-duration),
      box-shadow
        var(--default-transition-timing-function)
        var(--default-transition-duration);

    &:is(.entry:hover *, .entry.is-current *) {
      top: calc(var(--spacing) * -2);
      box-shadow: var(--shadow-md);
    }
  }
  .entry__name {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    color: var(--color-primary);
    transition: color
      var(--default-transition-timing-function)
      var(--default-transition-duration);

    &:is(.entry:hover *, .entry.is-current *) {
      color: var(--color-accent);
    }

    &::after {
      content: "";
      display: block;
      margin-top: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 6);
      height: var(--line-medium);
      background-color: var(--color-accent);
    }
  }
  .entry__summary {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: var(--font-weight-light);
    line-height: var(--leading-snug);
    color: var(--color-primary);
  }
  .entry__more {
    margin-top: auto;
    text-align: right;
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: var(--spacing);
    transition: text-decoration-color
      var(--default-transition-timing-function)
      var(--default-transition-duration);

    &:is(.entry:hover *) {
      text-decoration-color: var(--color-accent--tint);
    }
  }

  .engage {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 8);
  }
  .engage_item {
    display: flex;
    flex-direction: column;
  }

  .contact {
    flex-grow: 1;
  }

  .socials {
    display: flex;
    gap: calc(var(--spacing) * 4);
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 2);
  }

  .social {
    display: block;
    position: relative;
    height: calc(var(--spacing) * 8);
    text-indent: calc(var(--spacing) * 8);
    white-space: nowrap;
    overflow: hidden;

    &::before {
      content: "";
      color: inherit;
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      mask-position: center;
      mask-repeat: no-repeat;
      mask-size: contain;
      background-color: var(--color-primary);
    }

    &:hover::before {
      background-color: var(--color-accent);
    }
  }
  .social--facebook {
    width: calc((var(--spacing) * 8) * .5);

    &::before {
      mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2025%2050%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20aria-hidden%3D%22true%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23000000%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M23.3025376%2C28.1233003%20L24.6183483%2C19.0785895%20L16.5130915%2C19.0785895%20L16.5130915%2C13.1996094%20C16.5130915%2C10.7264165%2017.6447331%2C8.30979732%2021.2631621%2C8.30979732%20L25%2C8.30979732%20L25%2C0.607677001%20C22.8237584%2C0.232302117%2020.6249244%2C0.0291606325%2018.4210473%2C0%20C11.7500101%2C0%207.39470287%2C4.33859972%207.39470287%2C12.1820454%20L7.39470287%2C19.0785895%20L0%2C19.0785895%20L0%2C28.1233003%20L7.39470287%2C28.1233003%20L7.39470287%2C50%20L16.5130915%2C50%20L16.5130915%2C28.1233003%20L23.3025376%2C28.1233003%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    }
  }
  .social--instagram {
    width: calc(var(--spacing) * 8);

    &::before {
      mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2050%2050%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20aria-hidden%3D%22true%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate%28-27.000000%2C%200.000000%29%22%20fill%3D%22%23000000%22%20fill-rule%3D%22nonzero%22%3E%3Cg%20transform%3D%22translate%2827.000000%2C%200.000000%29%22%3E%3Cpath%20d%3D%22M16.6686655%2C25%20C16.6686655%2C20.3978%2020.3986767%2C16.666%2025.0009994%2C16.666%20C29.6034221%2C16.666%2033.3353322%2C20.3978%2033.3353322%2C25%20C33.3353322%2C29.6022%2029.6034221%2C33.334%2025.0009994%2C33.334%20C20.3986767%2C33.334%2016.6686655%2C29.6022%2016.6686655%2C25%20Z%20M12.1632886%2C25%20C12.1632886%2C32.09%2017.91077%2C37.8372%2025.0009994%2C37.8372%20C32.0913289%2C37.8372%2037.8387103%2C32.09%2037.8387103%2C25%20C37.8387103%2C17.91%2032.0913289%2C12.1628%2025.0009994%2C12.1628%20C17.91077%2C12.1628%2012.1632886%2C17.91%2012.1632886%2C25%20Z%20M35.3468056%2C11.6538%20C35.3466059%2C12.2471%2035.5223075%2C12.8272%2035.851823%2C13.3207%20C36.1812385%2C13.8142%2036.6496762%2C14.1989%2037.1977692%2C14.4261%20C37.7458623%2C14.6534%2038.3491245%2C14.7131%2038.9310986%2C14.5976%20C39.5130727%2C14.482%2040.0477732%2C14.1965%2040.4675382%2C13.7771%20C40.8873031%2C13.3577%2041.173243%2C12.8233%2041.2891781%2C12.2414%20C41.4052131%2C11.6595%2041.3460462%2C11.0563%2041.1191733%2C10.508%20C40.8923003%2C9.9598%2040.5080155%2C9.4911%2040.0147917%2C9.1612%20C39.521468%2C8.8314%2038.9414928%2C8.6552%2038.348225%2C8.655%20L38.3470257%2C8.655%20C37.5515711%2C8.6553%2036.7888982%2C8.9714%2036.2264132%2C9.5336%20C35.6639282%2C10.0959%2035.3475054%2C10.8584%2035.3468056%2C11.6538%20Z%20M14.9006556%2C45.3494%20C12.4631207%2C45.2384%2011.1382626%2C44.8324%2010.2578556%2C44.4894%20C9.09060926%2C44.035%208.25777565%2C43.4938%207.38216599%2C42.6194%20C6.50645638%2C41.745%205.9644599%2C40.913%205.51201327%2C39.7458%20C5.16880547%2C38.8658%204.76283281%2C37.5406%204.65199488%2C35.1032%20C4.53086272%2C32.468%204.50657632%2C31.6764%204.50657632%2C25.0002%20C4.50657632%2C18.324%204.5328616%2C17.5346%204.65199488%2C14.8972%20C4.7630327%2C12.4598%205.17200368%2C11.1372%205.51201327%2C10.2546%20C5.96645878%2C9.0874%206.50765571%2C8.2546%207.38216599%2C7.379%20C8.25657632%2C6.5034%209.08861038%2C5.9614%2010.2578556%2C5.509%20C11.1378628%2C5.1658%2012.4631207%2C4.7598%2014.9006556%2C4.649%20C17.5359799%2C4.5278%2018.3275366%2C4.5036%2025.0009994%2C4.5036%20C31.6744623%2C4.5036%2032.4669185%2C4.5298%2035.1044415%2C4.649%20C37.5419765%2C4.76%2038.8646358%2C5.169%2039.7472415%2C5.509%20C40.9144879%2C5.9614%2041.7473215%2C6.5046%2042.6229312%2C7.379%20C43.4985408%2C8.2534%2044.0386384%2C9.0874%2044.4929839%2C10.2546%20C44.8361917%2C11.1346%2045.2422643%2C12.4598%2045.3531023%2C14.8972%20C45.4742344%2C17.5346%2045.4984209%2C18.324%2045.4984209%2C25.0002%20C45.4984209%2C31.6764%2045.4742344%2C32.4658%2045.3531023%2C35.1032%20C45.2420644%2C37.5406%2044.833993%2C38.8654%2044.4929839%2C39.7458%20C44.0386384%2C40.913%2043.4973415%2C41.7458%2042.6229312%2C42.6194%20C41.7485208%2C43.493%2040.9144879%2C44.035%2039.7472415%2C44.4894%20C38.8672343%2C44.8326%2037.5419765%2C45.2386%2035.1044415%2C45.3494%20C32.4691173%2C45.4706%2031.6774606%2C45.4948%2025.0009994%2C45.4948%20C18.3245383%2C45.4948%2017.5351803%2C45.4706%2014.9006556%2C45.3494%20Z%20M14.6936715%2C0.1514%20C12.032162%2C0.2726%2010.2134805%2C0.6946%208.6251699%2C1.3126%20C6.98029104%2C1.9508%205.58787079%2C2.807%204.19644999%2C4.1962%20C2.80492924%2C5.5854%201.95090749%2C6.98%201.31266491%2C8.6248%20C0.694710962%2C10.214%200.272647318%2C12.0316%200.151415207%2C14.693%20C0.0282841609%2C17.3586%200%2C18.2108%200%2C25%20C0%2C31.7892%200.0282841609%2C32.6414%200.151415207%2C35.307%20C0.272647318%2C37.9686%200.694710962%2C39.786%201.31266491%2C41.3752%20C1.95090749%2C43.019%202.80512913%2C44.4152%204.19644999%2C45.8038%20C5.5876709%2C47.1924%206.98029104%2C48.0474%208.6251699%2C48.6874%20C10.2164788%2C49.3054%2012.032162%2C49.7274%2014.6936715%2C49.8486%20C17.360778%2C49.9698%2018.2116015%2C50%2025.0009994%2C50%20C31.7904973%2C50%2032.6427201%2C49.9718%2035.3084273%2C49.8486%20C37.9701367%2C49.7274%2039.7876189%2C49.3054%2041.3769289%2C48.6874%20C43.0208083%2C48.0474%2044.414228%2C47.193%2045.8056488%2C45.8038%20C47.1971696%2C44.4146%2048.0493923%2C43.019%2048.6894339%2C41.3752%20C49.3073879%2C39.786%2049.7314504%2C37.9684%2049.8506836%2C35.307%20C49.9718158%2C32.6394%2050%2C31.7892%2050%2C25%20C50%2C18.2108%2049.9718158%2C17.3586%2049.8506836%2C14.693%20C49.7294515%2C12.0314%2049.3073879%2C10.213%2048.6894339%2C8.6248%20C48.0493923%2C6.981%2047.1949708%2C5.5876%2045.8056488%2C4.1962%20C44.4164268%2C2.8048%2043.0208083%2C1.9508%2041.3789278%2C1.3126%20C39.7876189%2C0.6946%2037.9699368%2C0.2706%2035.3104262%2C0.1514%20C32.644719%2C0.0302%2031.7924962%2C0%2025.0029983%2C0%20C18.2136004%2C0%2017.360778%2C0.0282%2014.6936715%2C0.1514%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    }
  }

  .opening {
    container-type: inline-size;
    display: flex;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
  }

  .footer {
    background-color: var(--color-accent--tint);
  }
  .footer__copyright {
    max-width: var(--content-width);
    margin-inline: auto;
    padding: var(--content-padding);
  }
}

@layer utilities {
  .grid {
    --grid-gap: calc(var(--spacing) * 15);
    --grid-cols: 1;
    --col-span: 1;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--grid-gap);
    container: grid / inline-size;
    width: 100%;

    & > * {
      display: flex;
      flex-direction: column;
      
      flex: 0 0 calc(
        (100% - (var(--grid-gap) * (var(--grid-cols) - 1))) / var(--grid-cols)
      );

      @container grid (width > 20rem) {
        &:is(.grid--xs > *) { --grid-cols: 2; }
      }
      @container grid (width > 28rem) {
        &:is(.grid--xs > *) { --grid-cols: 3; }
        &:is(.grid--sm > *) { --grid-cols: 2; }
      }
      @container grid (width > 47rem) {
        &:is(.grid--xs > *) { --grid-cols: 4; }
        &:is(.grid--sm > *) { --grid-cols: 3; }
        &:is(.grid--md > *) { --grid-cols: 3; }
        &:is(.grid--lg > *) { --grid-cols: 2; }
        &:is(.grid--xl > *) { --grid-cols: 1; }
      }
      @container grid (width > 55rem) {
        &:is(.grid--xs > *) { --grid-cols: 5; }
        &:is(.grid--sm > *) { --grid-cols: 3; }
        &:is(.grid--md > *) { --grid-cols: 3; }
        &:is(.grid--lg > *) { --grid-cols: 2; }
        &:is(.grid--xl > *) { --grid-cols: 1; }
      }
      @container grid (width > 61rem) {
        &:is(.grid--xs > *) { --grid-cols: 5; }
        &:is(.grid--sm > *) { --grid-cols: 4; }
        &:is(.grid--md > *) { --grid-cols: 4; }
        &:is(.grid--lg > *) { --grid-cols: 3; }
        &:is(.grid--xl > *) { --grid-cols: 2; }
      }
  
      & > * {
        width: 100%;
      }
    }
  }
  .grid--xs {
    --grid-gap: calc(var(--spacing) * 6);
  }
  .grid--sm {
    --grid-gap: calc(var(--spacing) * 7);
  }
  .grid--md {
    --grid-gap: calc(var(--spacing) * 8);
  }
  .grid--lg {
    --grid-gap: calc(var(--spacing) * 10);
  }
  .grid--xl {
    --grid-gap: calc(var(--spacing) * 15);
  }
  
  .prose {
    &:not(.prose--expand, :has(> .grid:only-child)) > * {
      max-width: min(var(--reading-width), 100%);
      margin-inline: auto;
    }
    & > *:not(.image, .grid, .engage) + * {
      margin-top: .75em;
    }
    & > *:is(.image, .grid, .engage) {
      &:not(:first-child) { margin-block-start: 2rem; }
      &:not(:last-child) { margin-block-end: 2rem; }
    }
  }

  .align--center {
    align-items: center;

    & > *:not(.grid) {
      text-align: center;
    }
  }
}