/*
Theme Name: American Sailboat Racing Foundation
Author: Foresite Group
Author URI: https://foresitegrp.com
Version: 1.0

font-family: "DM Sans", sans-serif;
font-family: "Barlow Condensed", sans-serif;
*/

:root {
  --black: #000000;
  --white: #FFFFFF;
  --offwhite: #F5F5F1;
  --gray: #E2E2E2;
  --lightestblue: #EDF2FB;
  --lightblue: #BDEAF5;
  --blue: #149AD6;
  --darkblue: #0A0838;
  --purple: #2C296A;
  --red: #BD2126;

  --site-width: 1240px;
  --toggle-width: 44px;
  --toggle-height: 44px;
  --toggle-bar-height: 0.4rem;
  --toggle-color: var(--black);

  --arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 62 448 388'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H109.3l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E");

  --arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 62 448 388'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h306.7L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");

  --chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 0 14 24'%3E%3Cpath d='M4.8 21.57L7.222 24L19.2 12L7.222 0L4.8 2.43L14.347 12z'/%3E%3C/svg%3E");

  --instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3E%3Cpath d='M1024 768q0-106-75-181t-181-75t-181 75t-75 181t75 181t181 75t181-75t75-181m138 0q0 164-115 279t-279 115t-279-115t-115-279t115-279t279-115t279 115t115 279m108-410q0 38-27 65t-65 27t-65-27t-27-65t27-65t65-27t65 27t27 65M768 138q-7 0-76.5-.5t-105.5 0t-96.5 3t-103 10T315 169q-50 20-88 58t-58 88q-11 29-18.5 71.5t-10 103t-3 96.5t0 105.5t.5 76.5t-.5 76.5t0 105.5t3 96.5t10 103T169 1221q20 50 58 88t88 58q29 11 71.5 18.5t103 10t96.5 3t105.5 0t76.5-.5t76.5.5t105.5 0t96.5-3t103-10t71.5-18.5q50-20 88-58t58-88q11-29 18.5-71.5t10-103t3-96.5t0-105.5t-.5-76.5t.5-76.5t0-105.5t-3-96.5t-10-103T1367 315q-20-50-58-88t-88-58q-29-11-71.5-18.5t-103-10t-96.5-3t-105.5 0t-76.5.5m768 630q0 229-5 317q-10 208-124 322t-322 124q-88 5-317 5t-317-5q-208-10-322-124T5 1085q-5-88-5-317t5-317q10-208 124-322T451 5q88-5 317-5t317 5q208 10 322 124t124 322q5 88 5 317'/%3E%3C/svg%3E");
}

BODY {
  margin: 0; padding: 0; background-color: var(--white); color: var(--black);
  font: 400 1rem/1 "DM Sans", sans-serif;
}

IMG { border: 0; max-width: 100%; height: auto; }

A {
  color: var(--red); text-decoration: none; transition: all 0.2s;

  &:hover { color: var(--black); }

  &.button, .button & {
    display: inline-block; border-radius: 0.3em; border: 0.1875rem solid var(--red);
    box-sizing: border-box; padding: 0.9em 3em; background: var(--red);
    color: var(--white); font: 500 1.25rem/1 "DM Sans", sans-serif;
    text-align: center; text-transform: uppercase;

    &.outline {
      padding: 0.9em 2em; background: transparent; color: var(--red);

      &:hover {
        background: transparent; border-color: var(--darkblue);
        color: var(--darkblue);
      }
    }

    &:hover {
      border-color: var(--darkblue); background: var(--darkblue);
      color: var(--white);
    }
  }

  &.arrow {
    display: inline-flex; align-items: center; gap: 0 0.3em; font-weight: 600;

    &:hover { color: var(--blue); }

    &:after {
      content: ''; width: 1em; height: 0.8em; background: var(--red);
      mask: var(--arrow-right) center / contain no-repeat;
      transition: all 0.2s;
    }

    &:hover:after { background: var(--blue); }
  }
}

H1, H2, H3, H4 {
  margin: 0; font: 700 7.1875rem/0.87 "Barlow Condensed", sans-serif;
  text-transform: uppercase;

  &:is(H2) { font-size: 5rem; }
  &:is(H3) { font-size: 3rem; }
  &:is(H4) { font-size: 1.375rem; }
}

P { margin: 0 0 1.5em; &:last-of-type { margin-bottom: 0; } }

.site-width {
  width: var(--site-width); margin: 0 auto;
  @media (max-width: 1290px) { & { width: 96%; } }
}

/* MULTIPLE PAGES */
#page-header {
  color: var(--purple); padding: 3.3rem 0 28px;

  H1 { font-size: 4rem; }
}

#page-content { padding-bottom: 3rem; }

FORM {
  INPUT[name="username"] { position: absolute; left: -999999999px; }

  INPUT:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
  TEXTAREA, SELECT {
    width: 100%; box-sizing: border-box; margin: 0 0 2rem; outline: 0;
    border: 0.125rem solid var(--gray); border-radius: 0.375rem;
    padding: 1.25em 1em 1.15em; background: var(--white); color: var(--black);
    font: 600 1.25rem/1 "DM Sans", sans-serif;
    -webkit-appearance: none; appearance: none;

    &:is(TEXTAREA) { height: 11em; }

    &:-ms-input-placeholder { color: #868686; text-transform: uppercase; }
    &::placeholder { color: #868686; opacity: 1; text-transform: uppercase; }
    &:focus:-ms-input-placeholder { color: transparent; }
    &:focus::placeholder { color: transparent; opacity: 0; }

    &.alert {
      border-color: var(--red) !important;

      &:-ms-input-placeholder { color: var(--red); }
      &::placeholder { color: var(--red); opacity: 1; }
      &:focus:-ms-input-placeholder { color: transparent; }
      &:focus::placeholder { color: transparent; opacity: 0; }
    }
  }
  
  LABEL:has(INPUT[type="checkbox"]) {
    display: flex; align-items: center; gap: 0.5em; margin-bottom: 1em;
  }

  INPUT[type="checkbox"] {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    flex-direction: column; place-content: center; width: 0.9em; height: 0.9em;
    box-sizing: border-box; margin: 0; border: 0.125rem solid var(--black);
    border-radius: 0.125rem; font-size: inherit;
    
    &:before {
      content: ""; width: 0.5em; height: 0.5em;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    &:checked:before { background-color: var(--black); }
  }

  BUTTON {
    display: inline-block; width: 100%; outline: 0; border-radius: 0.3125rem;
    border: 0.125rem solid var(--red); box-sizing: border-box;
    padding: 1em 1.56em; background: var(--red); color: var(--white);
    font: 700 1.5rem/1 "Barlow Condensed", sans-serif; text-align: center;
    text-transform: uppercase; cursor: pointer; transition: all 0.2s;

    &:hover {
      border-color: var(--blue); background: var(--blue); color: var(--white);
    }

    &.loader {
      border-color: #A0A0A0; background: #A0A0A0; color: #D8D8D8;
      pointer-events: none; position: relative;

      &:before {
        --loader-size: 2em; animation: spin 1s linear infinite;
        content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
        box-sizing: border-box; width: var(--loader-size);
        height: var(--loader-size); border-radius: 50%;
        border: 0.2em solid var(--white); border-top-color: var(--lightblue);
      }
    }
  }
}

@keyframes spin { 0% { rotate: 0deg; } 100% { rotate: 360deg; } }

DIALOG {
  border: 0; width: 31.25rem; padding: 0; box-sizing: border-box;
  font-size: 1.5rem; line-height: 1.2; overflow: visible;

  @media (max-width: 550px) { & { width: 96%; } }

  &::backdrop { background: rgba(0,0,0,0.8); }

  &:not([popover]) BUTTON {
    position: absolute; top: -1rem; right: -1rem; width: 2rem; height: 2rem;
    outline: 0; border-radius: 50%; border: 0.125rem solid var(--white);
    padding: 0; background: var(--red); color: var(--white); font-size: 1rem;
    line-height: 1; cursor: pointer;

    &:hover { background: var(--blue); }
  }

  > DIV, &[popover] { padding: 1.75rem 2rem; }
}

/* HEADER */
HEADER {
  position: sticky; top: 0; z-index: 9999; width: 100%;
  background: var(--white); color: var(--black);
  box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);

  SECTION { display: flex; justify-content: space-between; }
}

#logo { margin: 1rem 0; line-height: 1; IMG { width: 88px; } }

#toggle-menu {
  display: none;

  + LABEL {
    position: relative; display: none; cursor: pointer;
    width: var(--toggle-width); height: var(--toggle-height);
    background: linear-gradient(transparent, transparent calc(var(--toggle-height) / 2 - (var(--toggle-bar-height) / 2)), var(--toggle-color) var(--toggle-bar-height), var(--toggle-color) calc(var(--toggle-height) / 2 + (var(--toggle-bar-height) / 2)), transparent calc(var(--toggle-height) / 2 + (var(--toggle-bar-height) / 2)), transparent); transition: all 0.3s ease-in-out;

    @media (max-width: 800px) { & {
      display: block; margin-left: auto; align-self: center;
    } }

    &:before, &:after {
      content: ""; width: 100%; height: var(--toggle-bar-height);
      background: var(--toggle-color); position: absolute;
      top: calc(50% - (var(--toggle-bar-height) * 2.5)); left: 0;
      transition: all 0.15s ease-in-out;
    }

    &:after { top: calc(50% + (var(--toggle-bar-height) * 1.5)); }

    + NAV {
      display: flex;

      @media (max-width: 800px) { & {
        position: absolute; top: -9999999px; left: 0; width: 100%;
        box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);
      } }

      UL {
        display: flex; justify-content: flex-end; gap: 1.5rem 2.8em;
        margin: 0; padding: 0; list-style-type: none; font-size: 1.125rem;
        font-weight: 600;

        @media (max-width: 1200px) { & { column-gap: 3vw; } }
        @media (max-width: 1100px) { & { font-size: 1.636vw; } }

        @media (max-width: 800px) { & {
          flex-direction: column; gap: 1rem 0; width: 100%; padding-bottom: 1.5rem;
          background: var(--white); font-size: 2rem; text-align: center;
        } }

        LI {
          position: relative;

          &:hover A { color: var(--darkblue); }

          A {
            display: flex; justify-content: center; flex-direction: column;
            height: 100%; white-space: nowrap; color: var(--black);

            @media (max-width: 800px) { & { display: block; height: auto; } }
            
            &:hover { color: var(--blue); }
          }

          &.button {
            align-self: center;

            A {
              padding: 0.9em 2em; color: var(--white); font-size: 111%;

              @media (max-width: 800px) { & { padding: 0.5em 2em; font-size: 90%; } }
            }
          }

          UL {
            display: none; flex-direction: column; gap: 0; position: absolute;
            top: 100%; left: 0; padding-bottom: 0.4em; background: var(--white);
            font-size: 90%; box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1);

            @media (max-width: 800px) { & {
              display: flex; gap: 1rem 0; position: unset; margin-top: 1rem;
              padding-bottom: 0; box-shadow: none;
            } }

            LI:hover & { display: flex; }

            @media (min-width: 801px) { A { padding: 0.5em 1em; } }
          } /* NAV UL LI UL */
        } /* NAV UL LI */
      } /* NAV UL */
    } /* NAV */
  }

  &:checked + LABEL {
    background: transparent;

    &:before, &:after { top: 50%; translate: 0 -50%; rotate: 45deg; }

    &:after { rotate: -45deg; }

    + NAV { top: 100%; }
  }
}

/* FOOTER */
FOOTER {
  padding: calc(3.75rem + 65px) 0 1.5rem;
  background: var(--darkblue); color: var(--white);
  clip-path: polygon(0 21px, 34% 65px, 100% 0, 100% 100%, 0 100%);

  A { color: var(--white); &:hover { color: var(--lightblue); } }

  .site-width {
    display: flex; justify-content: space-between;

    #footer-logo IMG { width: 180px; filter: brightness(0) invert(1); }

    NAV {
      padding-top: 0.6875rem;

      UL {
        display: flex; gap: 1em 2.8em; margin: 0; padding: 0;
        list-style-type: none; font: 500 1.125rem/1 "DM Sans", sans-serif;

        @media (801px <= width <= 1100px) { & { font-size: 1.636vw; } }
        @media (max-width: 800px) { & { flex-direction: column; } }
        @media (max-width: 500px) { & { font-size: 3.6vw; } }

        LI {
          &.button { display: none; }

          UL { flex-direction: column; margin-top: 1em; }
        }
      }
    }
  }

  #copyright { justify-content: center; padding-top: 3em; }
}

/* HOME */
#home-hero {
  display: flex; position: relative; box-sizing: border-box;
  background: center right / cover no-repeat var(--purple); color: var(--white);

  @media (max-width: 1000px) { & { background-position: center; } }

  &:before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(to right, rgb(from var(--purple) r g b / 0.75), rgb(from var(--purple) r g b / 0.75) 33%, transparent);
  }

  .site-width {
    translate: 0 0 1px; padding: 4.65em 0 5.3em; font-weight: 500;
    font-size: 1.25rem; line-height: 1.3;
    
    H1 { max-width: 10ch; margin-bottom: 0.25em; }

    P {
      width: 57%; text-shadow: 0 0 0.2em rgb(from var(--purple) r g b / 0.75);
      @media (max-width: 800px) { & { width: 100%; } }
    }
  }
}

#home-events {
  background: url(images/home-events.webp) center / cover no-repeat;
  position: relative;

  &:after {
    content: ''; position: absolute; z-index: 1; inset: 0;
    background-color: rgba(255,255,255,0.95);
    clip-path: polygon(49% 0, 100% 0, 100% 101%, 59% 101%, 39% calc(100% - 59px));
  }

  @media (max-width: 900px) { &:after {
    clip-path: polygon(37% 0, 100% 0, 100% 101%, 54% 101%, 24% calc(100% - 59px));
  } }

  @media (max-width: 800px) { &:after { clip-path: unset; } }

  .site-width {
    position: relative; z-index: 2; display: flex; justify-content: space-between;
    align-items: flex-start; padding: 3.125rem 0;

    @media (max-width: 800px) { & { flex-direction: column; } }

    .header {
      width: 294px; line-height: 1.4; font-weight: 600;

      @media (max-width: 800px) { & { width: 100%; padding-bottom: 3rem; } }

      H2 { margin-bottom: 0.3em; color: var(--purple); }

      .button { margin-top: 1.5em; }
    }

    .event-list {
      width: 600px;

      @media (max-width: 1290px) { & { width: 49%; } }
      @media (max-width: 900px) { & { width: calc(100% - 330px); } }
      @media (max-width: 800px) { & { width: 100%; } }

      .event:first-of-type { padding-top: 0; }
      .event:last-of-type { padding-bottom: 0; border-bottom: 0; }
    }
  }
}

#home-support {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1em 0.5em; padding: 5rem 0;

  @media (max-width: 750px) { & { flex-direction: column; } }

  H2 {
    max-width: 11ch; margin: 0; font-size: 5.1875rem;
    @media (751px <= width <= 1290px) { & { font-size: 6.434vw; } }
    @media (max-width: 750px) { & { max-width: 100%; } }
    @media (max-width: 420px) { & { font-size: 19.762vw; } }
  }

  > DIV {
    display: flex; flex-wrap: wrap; gap: 6px; width: 100%;

    > DIV {
      display: flex; align-items: flex-end; width: calc(50% - 3px);
      aspect-ratio: 406 / 126; box-sizing: border-box; padding: 0 0 0.7em 0.78em;
      background: center / cover no-repeat; color: var(--white);
      font: 700 1.375rem/1 "Barlow Condensed", sans-serif; text-transform: uppercase;
      position: relative; z-index: 1;

      &:after {
        content: ''; position: absolute; z-index: -1;
        inset: calc(100% - 2.4em) 0 0 0;
        background: linear-gradient(to right, var(--purple), transparent);
      }

      @media (max-width: 600px) { & { width: 100%; } }
    }
  }
}

#home-sailors {
  position: relative; overflow-x: hidden; padding: 130px 0 4rem;
  background-color: var(--darkblue);

  @media (max-width: 750px) { & { padding-top: 66.667vw; } }

  &:after {
    content: ''; position: absolute; top: 0; left: 50%; translate: -50% 0;
    width: 1425px; height: 61px; background: var(--white);
    clip-path: polygon(0 0, 52% 100%, 100% 0);
  }

  > .image {
    position: absolute; top: 0; width: 100%; height: 511px;
    background: url(images/home-sailors.webp) top left / auto 100% no-repeat;
    clip-path: polygon(54.5% 0, 42% 58%, 50% 100%, 0 100%, 0 0);

    @media (max-width: 1000px) { & { background-position: top 0 left -150px; } }
    @media (max-width: 750px) { & { height: auto; aspect-ratio: 750 / 500; background-position: center; background-size: cover; clip-path: unset; } }

    &:before {
      content: ''; position: absolute; bottom: 0; left: 0;
      width: 100%; height: 200px;
      background: linear-gradient(to top, var(--darkblue), transparent);
    }
  }

  > DIV:not(.image) { translate: 0 0 1px; }

  > .text {
    padding-left: calc(var(--site-width) * 0.55);
    padding-right: calc(var(--site-width) * 0.09);
    box-sizing: border-box; color: var(--white); line-height: 1.4; font-weight: 600;

    @media (max-width: 1290px) { & { padding: 0 0 0 53%; } }
    @media (max-width: 750px) { & { padding: 2rem 0 0; } }

    H3 { margin-bottom: 1.5rem; }

    .button {
      margin-top: 1.5rem;

      &:hover {
        border-color: var(--red); background: transparent; color: var(--red);
      }
    }
  }

  .f-carousel {
    margin-top: 70px; --f-carousel-gap: 30px;

    .is-arrow {
      width: 2rem; height: 2rem; box-sizing: border-box;
      background: var(--darkblue); color: var(--white);
      --f-button-svg-width: 0.9em; --f-button-svg-height: 0.9em;
      border: 1px solid var(--white); border-radius: 5px;
      
      &:hover { background: var(--blue); }

      &.is-prev { left: -1%; @media (min-width: 1375px) { & { left: -58px; } } }
      &.is-next { right: -1%; @media (min-width: 1375px) { & { right: -58px; } } }
    }

    .f-carousel__slide {
      display: flex; flex-direction: column; gap: 6px 0;
      width: 288px; box-sizing: border-box;
      background: var(--offwhite);

      .image { aspect-ratio: 288 / 222; background: center / cover no-repeat; }

      .text {
        display: flex; flex-direction: column; flex-grow: 2;
        padding: 1em 1.25em;

        H4 { margin-bottom: 0.3em; }

        H5 {
          margin: 0 0 1.1em; color: var(--red); font-weight: 600; font-size: 100%;
          min-height: 1em;
        }

        P { margin-bottom: 1.4em; line-height: 1.4; }

        .arrow { margin-top: auto; }
      }
    }
  }
}

#home-news {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3rem 0;
  padding: 6rem 0;

  H3 { width: 75%; }

  > DIV {
    display: flex; flex-direction: column; width: 31.85%;
    background: var(--white); box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,0.25);

    @media (max-width: 750px) { & { width: 100%; } }

    .image { aspect-ratio: 395 / 184; background: center / cover no-repeat; }

    .text {
      display: flex; flex-direction: column; flex-grow: 2; padding: 1.875em;

      .date {
        margin-bottom: 0.5em; color: var(--blue); font-size: 0.875em;
        font-weight: 600;
      }

      H4 { margin-bottom: 0.4em; line-height: 1.1; }

      P { margin-bottom: 1.4em; line-height: 1.4; }

      .arrow { align-self: flex-end; margin-top: auto; }
    }
  }
}

#instagram {
  display: flex; justify-content: space-between; align-items: flex-end;
  position: relative; padding-bottom: 5rem; 

  @media (max-width: 750px) { & {
    flex-direction: column; align-items: stretch; row-gap: 2rem;
  } }

  &:before {
    content: 'ASRF'; position: absolute; top: -58%; left: 42%; z-index: -1;
    color: transparent; -webkit-text-stroke: 3px var(--lightblue);
    font: italic 700 285px/0.87 "Barlow Condensed", sans-serif;
  }

  @media (max-width: 1100px) { &:before { left: auto; right: 6%; } }
  @media (max-width: 750px) { &:before { right: 8%; font-size: 42vw; } }

  .header {
    width: 348px;

    @media (max-width: 750px) { & { width: 100%; } }

    H2 { margin-bottom: 0.3em; color: var(--darkblue); line-height: 1; }

    .button {
      display: inline-flex; align-items: center; gap: 0 0.5em; padding: 0.8em 1em;

      &:before {
        content: ''; width: 1.1em; height: 1.1em; background: var(--red);
        mask: var(--instagram) center / contain no-repeat; transition: all 0.2s;
      }

      &:hover:before { background: var(--darkblue); }
    }
  }

  .insta {
    width: calc(100% - 404px);

    @media (max-width: 750px) { & { width: 100%; } }

    #sb_instagram { padding: 0 !important; #sbi_images { padding: 0; } }
  }
}

#events-page-header {
  background: center right / 64% auto no-repeat; position: relative;

  @media (max-width: 1000px) { & { background-size: cover; } }

  &:before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, var(--white), transparent 33%), linear-gradient(to right, var(--white) 25%, transparent 25%);
  }

  .site-width {
    padding: 5.125em 0 5.75em; line-height: 1.4; translate: 0 0 1px;
    background: linear-gradient(to right, var(--white) 423px, transparent 662px);
    text-shadow: 0 0 1em rgb(from var(--white) r g b / 0.9);

    @media (max-width: 750px) { & {
      margin: 0; padding-left: 2%; padding-right: 2%;
      background: linear-gradient(to right, var(--white) 33%, transparent);
    } }
    
    .has-image & > * {
      width: 499px; @media (max-width: 600px) { & { width: 100%; } }
    }

    H1 { margin-bottom: 0.5em; color: var(--purple); font-size: 4em; }
  }
}

#events {
  H2 { color: var(--purple); font-size: 3rem; }

  .event-list {
    width: 1028px; margin: 3rem auto;

    @media (max-width: 1070px) { & { width: 100%; } }
  }
}

.event-list {
  font-weight: 600;

  .event {
    display: grid; align-items: center; gap: 0 2.125em;
    grid-template-columns: auto 1fr minmax(11.3125em, auto);
    padding: 1.25em 0; border-bottom: 1px solid var(--gray);

    @media (max-width: 500px) { & { font-size: 3.2vw; } }

    &:last-of-type { border-bottom: 0; }

    .date {
      box-sizing: border-box; padding: 0.6em 0.82208em;
      background: var(--red); color: var(--white);
      font: 700 1.25em/1 "Barlow Condensed", sans-serif;
      text-transform: uppercase; text-align: center;

      DIV { font-size: 1.6em; }
    }

    .name H3 { margin-bottom: 0.25em; font-size: 1.375em; line-height: 1; }

    .tag {
      display: inline-block; border-radius: 0.429em; box-sizing: border-box;
      padding: 0.57em 1.429em; background: var(--offwhite);
      color: var(--purple); font-size: 0.875em; line-height: 0.9;
      text-transform: uppercase; text-align: center;

      &.olympic { background: var(--lightblue); }
      &.team-racing { background: var(--gray); }
      &.match-racing { background: var(--blue); color: var(--white); }
    }
  }
}

#sailors {
  display: flex; align-items: flex-start; row-gap: 1rem; padding-bottom: 3rem;

  @media (max-width: 600px) { & { flex-direction: column; } }

  .sailors {
    width: 42.6612%; padding-top: 0.625rem;

    @media (max-width: 1100px) { & { width: 444px; } }
    @media (max-width: 940px) { & { width: 50%; } }
    @media (max-width: 600px) { & { width: 100%; padding-top: 0; } }

    BUTTON {
      display: flex; align-items: center; gap: 1.125rem;
      width: 100%; outline: 0; border-radius: 0; border: 0;
      border-left: 0.125rem solid transparent; box-sizing: border-box;
      padding: 0.5rem 0.6875rem; background: transparent; color: var(--purple);
      font-weight: 500; font-size: 0.875rem; text-transform: uppercase;
      text-align: left; position: relative;

      @media (601px <= width <= 940px) { & { font-size: 1.4vw; } }

      &.active {
        border-left-color: var(--red); background: var(--lightestblue);
      }

      &:not(.active) { cursor: pointer; }

      &:after {
        content: ''; position: absolute; left: 0.6875rem; bottom: -0.0625rem;
        width: calc(100% - 1.375rem); height: 0.125rem; background: var(--gray);
      }

      &.active:after, &:has(+ .active):after { display: none; }

      .image {
        width: 6.3125rem; height: 6.3125rem; aspect-ratio: 1;
        border-radius: 0.375rem; background: center / cover no-repeat;
      }

      H2 { font-size: 1.5rem; }

      .org { padding-top: 0.5em; letter-spacing: 12%; }

      .icon {
        margin: 0 0.9375rem 0 auto; width: 0.625rem; height: 1.0625rem;
        aspect-ratio: 10 / 17; background: var(--black);
        mask: var(--chevron-right) center / contain no-repeat;

        .active & { background: var(--red); }

        @media (max-width: 600px) { & { rotate: 90deg; } }
      }
    }
  }

  #bio {
    width: 57.3388%; border: 0.0625rem solid var(--gray); border-radius: 0.375rem;
    box-sizing: border-box; padding: 1.625em; line-height: 1.4;

    @media (max-width: 1100px) { & { width: calc(100% - 444px); } }
    @media (max-width: 940px) { & { width: 50%; } }
    @media (max-width: 600px) { & { width: 100%; } }

    > DIV:not(:first-of-type) { display: none; }

    .image {
      margin-bottom: 1rem; aspect-ratio: 667 / 275;
      background: center / cover no-repeat;
    }
    
    .header {
      display: flex; justify-content: space-between; align-items: flex-start;

      H2 {
        color: var(--purple); font-size: 2.5em;

        &:after {
          content: ''; display: block; margin: 1rem 0; width: 3ch; height: 0.125rem;
          background: var(--red);
        }
      }

      .social {
        width: 1.5625rem; height: 1.5625rem; aspect-ratio: 1; margin-top: 0.5rem;
        background: var(--red); mask: var(--instagram) center / contain no-repeat;

        &:hover { background: var(--purple); }
      }
    }

    .org {
      margin-bottom: 0.8em; color: var(--purple); font-weight: 500;
      font-size: 1.125em; line-height: 1; letter-spacing: 12%;
      text-transform: uppercase;
    }
  }
}