@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');


/* =========================================
   ROOT
   ========================================= */

:root{

  --off-white:#F8F6F2;
  --black:#1A1A1A;
  --grey:#7A7A7A;

  --green:#5F7F5A;
  --blue:#A8B8C8;
  --orange:#E8763B;
  --pink:#E89B8C;

}


/* =========================================
   GLOBAL
   ========================================= */

*{
  box-sizing:border-box;
}


html,
body{

  margin:0;
  padding:0;

  background:var(--off-white);

  color:var(--black);

}


body{

  font-family:"JetBrains Mono",monospace;

  overflow-x:hidden;

  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%231A1A1A' stroke-width='2.2'/%3E%3C/svg%3E") 8 8,auto;

}



/* =========================================
   HEADER
   ========================================= */

.site-header{

  position:fixed;

  top:0;
  left:0;
  right:0;

  height:90px;

  z-index:100;

  background:var(--off-white);

  display:grid;

  grid-template-columns:1fr auto 1fr;

  align-items:center;

  padding:0 2.1vw;

}


.site-header a{

  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23E8763B' stroke-width='2.2'/%3E%3C/svg%3E") 8 8,auto;

}


.brand{

  display:flex;

  flex-direction:column;

  align-items:center;

  color:var(--black);

  text-decoration:none;

  transform:translateY(7px);

}


.brand-name{

  font-size:clamp(31px,2.8vw,49px);

  line-height:1;

  font-weight:700;

  letter-spacing:-.065em;

}


.brand-subtitle{

  margin-top:5px;

  font-size:12px;

  font-style:italic;

  color:var(--grey);

  white-space:nowrap;

}


.nav-link{

  color:var(--black);

  text-decoration:none;

  font-size:clamp(15px,1.2vw,20px);

}


.nav-link:hover{

  text-decoration:underline;

}


.right{

  justify-self:end;

}
/* =========================================
   DESKTOP HEADER ELEMENTS
   ========================================= */

/* Mobile elements are hidden on desktop */

.menu-toggle{

  display:none;

}

.mobile-spacer{

  display:none;

}


/* Keep desktop header positions */

.desktop-contact{

  grid-column:1;

  justify-self:start;

}


.site-header > .brand{

  grid-column:2;

  justify-self:center;

}


.desktop-join{

  grid-column:3;

  justify-self:end;

}


/* =========================================
   EVENTS PAGE
   ========================================= */

.events-page{

  width:min(1180px,86vw);

  margin:0 auto;

  padding-top:72px;

}



/* =========================================
   SECTIONS
   ========================================= */

.events-section{

  display:grid;

  grid-template-columns:55px minmax(0,1fr);

  column-gap:0;

  padding:105px 0 80px;

}


.events-label,
.events-number{

  font-size:13px;

  line-height:1.4;

  color:var(--grey);

  padding-top:2px;

}

.events-label{
  white-space:nowrap;
}


.events-content{

  min-width:0;

  max-width:850px;

}



/* =========================================
   INTRO
   ========================================= */

.events-intro{

  padding-top:105px;

}


.events-intro .events-content{

  padding-top:60px;

}


.events-intro h1{

  max-width:700px;

  margin:0 0 42px;

  font-size:clamp(30px,3vw,48px);

  line-height:1.08;

  font-weight:500;

  letter-spacing:-.06em;

}


.events-introduction{

  max-width:650px;

  margin:0 0 75px;

  font-size:14px;

  line-height:1.75;

}



/* =========================================
   SECTION HEADER
   ========================================= */

.events-heading,
.section-header{

  padding-bottom:12px;

  margin-bottom:35px;

  border-bottom:1px solid rgba(26,26,26,.18);

  font-size:13px;

  line-height:1.4;

  letter-spacing:.06em;

  font-weight:500;

}



/* =========================================
   EVENT LIST
   ========================================= */

.event-item{
  display:grid;
  grid-template-columns:125px minmax(0,1fr);
  column-gap:35px;

  padding:32px;

  background:var(--blue);

  border:none;
}


.event-item:first-of-type{

  border-top:none

}


.event-date{

  display:flex;

  flex-direction:column;

  padding-top:2px;

  padding-left:4px;

}


.event-day{

  font-size:28px;

  line-height:1;

  letter-spacing:-.05em;

}


.event-month{

  margin-top:7px;

  font-size:12px;

  color:var(--off-white);

  letter-spacing:.04em;

}


.event-information{

  max-width:650px;

}


.event-meta{

  margin-bottom:12px;

  font-size:12px;

  color:var(--off-white);

  letter-spacing:.05em;

}


.event-information h2{

  margin:0 0 8px;

  font-size:24px;

  line-height:1.25;

  font-weight:500;

  letter-spacing:-.04em;

}


.event-information p{

  margin:0 0 18px;

  font-size:15px;

  line-height:1.5;

}


.event-description{

  max-width:600px;

  margin-bottom:22px;

  font-size:12px;

  line-height:1.7;

}


.event-link{

  color:var(--black);

  font-size:13px;

  text-decoration:none;
  
  font-weight: 700;
   cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23E8763B' stroke-width='2.2'/%3E%3C/svg%3E") 8 8,auto;

}


.event-link:hover{

  text-decoration:underline;

}





/* =========================================
   LAST SECTION
   ========================================= */

.events-last{

  padding-bottom:130px;

}



/* =========================================
   FOOTER
   ========================================= */

.site-footer{

  position:relative;

  min-height:225px;

  padding:28px 2vw 12px;

  background:var(--off-white);

  color:var(--grey);

  font-size:11px;

  line-height:1.35;

  border-top:1px solid rgba(26,26,26,.12);

  display:grid;

  grid-template-columns:1fr 1fr;

  grid-template-rows:auto 1fr auto;

}


.footer-left{

  grid-column:1;

  grid-row:1 / 3;

}


.footer-name{

  color:var(--black);

  font-size:21px;

  font-weight:500;

  letter-spacing:-.04em;

}


.footer-legal-name{

  margin-top:3px;

  font-size:10px;

}


.footer-info{

  display:flex;

  flex-direction:column;

  gap:4px;

  margin-top:18px;

}


.footer-info a{

  color:var(--grey);

  text-decoration:none;

}


.footer-right{

  grid-column:2;

  grid-row:1 / 3;

  justify-self:end;

  text-align:right;

  margin-top:43px;

}


.footer-social{

  display:flex;

  flex-direction:column;

  gap:4px;

}


.footer-social a,
.footer-legal-nav a{

  color:var(--grey);

  text-decoration:none;

}


.footer-social a:hover,
.footer-legal-nav a:hover{

  color:var(--black);

  text-decoration:underline;

}


.footer-legal-nav{

  display:flex;

  flex-direction:column;

  gap:4px;

  margin-top:16px;

}


.footer-copyright{

  grid-column:1;

  grid-row:3;

  font-size:10px;

}



/* =========================================
   MOBILE
   ========================================= */

@media(max-width:700px){


  /* =========================================
     HEADER
     ========================================= */

  .site-header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    width:100%;

    height:64px;

    padding:0 16px;

    display:block !important;

  }


  /* HIDE DESKTOP LINKS */

  .site-header > .desktop-contact,
  .site-header > .desktop-join{

    display:none !important;

  }


  /* HAMBURGER */

  .menu-toggle{

    display:block !important;

    position:absolute;

    top:20px;
    left:16px;

    width:24px;
    height:24px;

    margin:0;
    padding:0;

    border:0;

    background:none;

    color:var(--black);

    font-family:"JetBrains Mono",monospace;

    font-size:22px;

    line-height:24px;

    text-align:center;

    cursor:pointer;

    z-index:501;

  }


  /* CENTERED LOGO */

  .site-header > .brand{

    position:fixed !important;

    top:13px !important;

    left:50vw !important;

    transform:translateX(-50%) !important;

    display:flex;

    flex-direction:column;

    align-items:center;

    width:max-content;

    margin:0;

    padding:0;

    z-index:501;

  }


  .site-header > .brand .brand-name{

    font-size:25px;

    line-height:1;

    white-space:nowrap;

  }


  .site-header > .brand .brand-subtitle{

    margin-top:5px;

    width:180px;

    font-size:7px;

    line-height:1.2;

    white-space:normal;

    text-align:center;

  }


  .mobile-spacer{

    display:none !important;

  }


  /* =========================================
     MOBILE MENU
     ========================================= */

  .mobile-menu{

    position:fixed;

    inset:0;

    z-index:500;

    background:var(--off-white);

    padding:90px 25px 35px;

    flex-direction:column;

    display:none;

  }


  .mobile-menu.open{

    display:flex;

  }


  .mobile-menu-close{

    position:absolute;

    top:17px;

    left:16px;

    width:28px;

    height:28px;

    padding:0;

    border:0;

    background:none;

    color:var(--black);

    font-family:"JetBrains Mono",monospace;

    font-size:30px;

    line-height:28px;

    cursor:pointer;

  }


  .mobile-menu-links{

    display:flex;

    flex-direction:column;

    gap:0;

  }


  .mobile-menu-links a{

    display:block;

    padding:15px 0;

    border-bottom:1px solid rgba(26,26,26,.18);

    color:var(--black);

    text-decoration:none;

    font-family:"JetBrains Mono",monospace;

    font-size:18px;

    line-height:1.3;

  }


  .mobile-menu-links a:first-child{

    border-top:1px solid var(--black);

  }


  /* =========================================
     EVENTS PAGE
     ========================================= */

  .events-page{

    width:auto;

    margin:0 28px;

    padding-top:60px;

  }


  /* =========================================
     INTRO SECTION
     ========================================= */

  .events-section{

    display:block;

    width:100%;

    padding:80px 0 65px;

  }


  /* THIS IS THE IMPORTANT FIX:
     LABEL AND CONTENT NOW SHARE
     EXACTLY THE SAME LEFT EDGE */

  .events-label{

    width:100%;

    padding:0;

    margin:0 0 40px;

    font-size:11px;

    line-height:1.4;

    white-space:nowrap;

  }


  .events-content{

    width:100%;

    max-width:none;

    min-width:0;

    padding:0 !important;

  }


  /* =========================================
     TITLE
     ========================================= */

  .events-intro h1{

    max-width:none;

    margin:0 0 35px;

    font-size:32px;

    line-height:1.08;

    font-weight:500;

    letter-spacing:-.06em;

  }


  /* =========================================
     INTRO TEXT
     ========================================= */

  .events-introduction{

    max-width:none;

    margin:0 0 75px;

    font-size:13px;

    line-height:1.7;

  }


  /* =========================================
     UPCOMING
     ========================================= */

  .events-heading{

    width:100%;

    padding-bottom:12px;

    margin-bottom:35px;

    border-bottom:1px solid rgba(26,26,26,.18);

    font-size:11px;

    line-height:1.4;

  }


  /* =========================================
     EVENT CARD
     ========================================= */

  .event-item{

    display:grid;

    grid-template-columns:70px minmax(0,1fr);

    column-gap:20px;

    width:100%;

    padding:25px 0;

    background:var(--blue);

    border:none;

  }


  /* =========================================
     DATE
     ========================================= */

  .event-date{

    display:flex;

    flex-direction:column;

    padding-top:2px;

  }


  .event-day{

    font-size:22px;

    line-height:1;

  }


  .event-month{

    margin-top:7px;

    font-size:11px;

  }


  /* =========================================
     EVENT INFORMATION
     ========================================= */

  .event-information{

    max-width:none;

    min-width:0;

  }


  .event-meta{

    margin-bottom:12px;

    font-size:10px;

    line-height:1.4;

  }


  .event-information h2{

    margin:0 0 8px;

    font-size:19px;

    line-height:1.25;

  }


  .event-information p{

    margin:0 0 18px;

    font-size:12px;

    line-height:1.5;

  }


  .event-description{

    max-width:none;

    margin-bottom:22px;

    font-size:10px;

    line-height:1.65;

  }


  .event-link{

    font-size:11px;

  }


  /* =========================================
     FOOTER
     ========================================= */

  .site-footer{

    min-height:320px;

    display:flex;

    flex-direction:column;

    padding:25px 20px 12px;

  }


  .footer-right{

    align-self:flex-start;

    text-align:left;

    margin-top:25px;

  }


  .footer-copyright{

    margin-top:auto;

  }

}