@font-face {
  font-family: 'JetBrainsMono';
  src: url('fonts/variable/JetBrainsMono[wght].ttf') format('truetype');
}

:root {
  --clr-highlight: hsl(203, 100%, 65%);
  --clr-highlight-darker: hsl(203, 100%, calc(65% - 15%));
  --clr-hint: #ffd414;
  --clr-error: #cd2c2c;
  --clr-gray-20: #efefef;
  --clr-gray-50: #b5b5b5;
  --clr-background: #FFFCF7;
  --clr-main-font: rgb(34, 34, 34);



  --fs-xs: clamp(0.74rem, 0.18vi + 0.7rem, 0.84rem);
  --fs-sm: clamp(0.83rem, 0.2vi + 0.78rem, 0.94rem);
  --fs-base: clamp(0.94rem, 0.23vi + 0.88rem, 1.06rem);
  --fs-md: clamp(1.05rem, 0.26vi + 0.99rem, 1.2rem);
  --fs-lg: clamp(1.19rem, 0.29vi + 1.11rem, 1.34rem);
  --fs-xl: clamp(1.33rem, 0.32vi + 1.25rem, 1.51rem);
  --fs-xxl: clamp(1.5rem, 0.36vi + 1.41rem, 1.7rem);
  --fs-xxxl: clamp(1.69rem, 0.41vi + 1.59rem, 1.91rem);  

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */

  -webkit-touch-callout: none;

}
a { 
  -webkit-user-select: none !important; 
}

@media (prefers-color-scheme: dark) {
  :root {
    --clr-background: #1a1b1e;
    --clr-main-font: white;
    --clr-gray-20: #393939;
  }
}

* {
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button {
  vertical-align: baseline;
  font-weight: inherit;
  font-style: inherit;
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

html {
  font-size: 120%;
  line-height: 1.2;
  font-family: 'JetBrainsMono';
  font-variation-settings: 'wght' 300;
  background-color: var(--clr-background);
  color: var(--clr-main-font);
  -webkit-font-smoothing: antialiased;
}

body{ 
  min-height: 100svh; 
  margin: 0; 
  padding-top: 36px;
  display: grid;
  grid-template-rows: 1fr auto;
}

.content-grid {
  --padding-inline: 36px;
  --content-max-width: 1080px;
  --breakout-max-width: 1120px;
  
  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}


.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;
  display: grid;
  grid-template-columns: inherit;
}

main {
  align-content: start;
}

section {
  display: grid;
  grid-template-columns: 1fr;  
  grid-template-areas:
  "main"
  "aside";
  grid-column-gap: 5rem;
  grid-row-gap: 6rem;
}

aside {
  grid-area: aside;
}

.aside-inner {
  position: sticky;
  top: 36px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

address {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    ".";
}

address h2 {
  grid-area: title;
}

address a {
  display: block;
  line-height: 1.4;
  margin-block-end: 1em;
}

address small {
  display: block;
  line-height: 1.4;
  margin-block-start: 1em;
  font-size: var(--fs-xs);
}

#address {
  position: relative;
  margin-bottom: 1rem;
}

#address .CopyToClipboard {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23009dff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-copy'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E") 24 24, pointer;
  position: absolute;
  opacity: 0;
  inset: 0 0 0 calc((24px + .5rem) * -1);
  transition: opacity 500ms cubic-bezier(1,0,.5,1);
}

#address:hover .CopyToClipboard {
  opacity: 1;
}

.clr-gray-50 {
  color: var(--clr-gray-50);
}

.txt-highlight {
  color: var(--clr-highlight);
}
.txt-hint {
  color: var(--clr-hint);
}
.txt-error {
  color: var(--clr-error);
}

p:not(:last-of-type) {
  margin-bottom: 1.25rem;
}

h1,h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-variation-settings: 'wght' 550;
}

h2, h3, h4, h5, h6 {
  font-variation-settings: 'wght' 500;
  margin-bottom: .5em;
}

h1 {
  font-size: var(--fs-xxxl);
}
h2 {
  font-variation-settings: 'wght' 600;
  font-size: var(--fs-xxl);
}
h3 {
  font-size: var(--fs-xl);
}
h4 {
  font-size: var(--fs-lg);
}

h5 {
  font-size: var(--fs-md);
}

p, h6 {
  font-size: var(--fs-base);
}

small,
address p,
address p:not(:last-of-type) {
  font-size: var(--fs-sm);
}

address p,
address p:not(:last-of-type) {
  margin-bottom: 0;
  line-height: 1.5;
  hyphens: none;
}

strong {
  font-variation-settings: 'wght' 700;
}

p, ul, address {
  line-height: 1.75;
}

p {
  hyphens: auto;
}

ul li {
  margin-bottom: 1rem;
}


h1.eyebrow {
  display: inline-block;
  font-size: 1rem;
  font-variation-settings: 'wght' 350;
  margin-bottom: 0.5em;
  border-bottom: 1px solid var(--clr-main-font);
}

#mc_embed_signup {
  margin-block: 4rem;
}

#mc_embed_signup input[type="email"] {
  font-family: inherit;
  font-variation-settings: inherit;
  padding: 8px 10px;
  border-radius: 100vw;
  border: 1px solid var(--clr-gray-20);
  display: block;
  font-size: inherit;
  max-width: 27ch;
}

#mc_embed_signup input[type="email"]:focus-within {
  border: 1px solid var(--clr-highlight);
  outline: none;
}

.newsletter-embed, .mc-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

button, .button, 
a.cta {
  cursor: pointer;
  font-family: inherit;
  font-variation-settings: inherit;
  text-align: left;
  border-radius: 100vw;
  border: 1px solid var(--clr-gray-20); 
  background-color: var(--clr-highlight);
  padding: 8px 24px;
  font-size: inherit;
  color: white;
  transition: all 500ms cubic-bezier(1,0,.5,1);
}

button:hover, .button:hover {
  background-color: var(--clr-highlight-darker);
}

a.cta {
  margin: 0 -20px;
  display: flex;
  width: calc(100% + 2 * 20px);
  border-radius: 10px 42px 42px 10px;
  background-color: var(--clr-background);
  padding: 12px 12px 12px 20px;
  align-items: center;
  gap: 1rem;
  transition: border-color 100ms cubic-bezier(1,0,.5,1);
  color: var(--clr-main-font);
}

a.cta:hover {
  color: inherit;
}

a.cta h1,
a.cta h2,
a.cta h3,
a.cta h4,
a.cta h5,
a.cta h6,
a.cta p {
  margin: 0
}

a.cta .circle {
  aspect-ratio: 1;
  border-radius: 100vw;
  width: 56px;
  height: 56px;
  border: 1px solid var(--clr-gray-20); 
  background-color: var(--clr-gray-20);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='26'%3E%3Cg fill='%23fff' data-name='Polygon 1'%3E%3Cpath d='M.5 22.642V3.358c0-.534.274-1.016.732-1.289a1.487 1.487 0 0 1 1.482-.03l17.801 9.642c.492.267.786.76.786 1.319a1.48 1.48 0 0 1-.786 1.319l-17.8 9.642a1.487 1.487 0 0 1-1.483-.03A1.487 1.487 0 0 1 .5 22.642Z'/%3E%3Cpath fill='%23f7f7f7' d='M20.8 13a.98.98 0 0 0-.523-.88L2.477 2.48a.984.984 0 0 0-.989.02.984.984 0 0 0-.488.859v19.284c0 .513.341.772.488.86a.984.984 0 0 0 .988.02l17.801-9.643a.98.98 0 0 0 .524-.879m1 0c0 .69-.35 1.38-1.048 1.759L2.953 24.4C1.62 25.123 0 24.158 0 22.642V3.358C0 1.842 1.62.878 2.953 1.599l17.8 9.642A1.98 1.98 0 0 1 21.801 13Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 60% center;
  margin-left: auto;
  transition: background-color 100ms cubic-bezier(1,0,.5,1);
}

a.cta:hover {
  border-color: var(--clr-highlight);
}

a.cta:hover .circle {
  background-color: var(--clr-highlight);
}

a.cta small {
  color: var(--clr-highlight);
}

a {
  color: var(--clr-highlight);
  text-decoration: none;
}

a:hover {
  color: var(--clr-highlight-darker);;
}

a.previous-page {
  font-size: 2rem;
}

footer {
  margin-top: 5rem;
  padding: 5rem 0 3rem;
}

footer .bug-found {
  cursor: pointer;
  position: relative;
  color: inherit;
  max-width: 27ch;
  margin-bottom: 3rem;
}

footer .bug-found::before {
  content: "⚡";
  color: var(--clr-hint);
  position: absolute;
  right: calc(100% + .5rem);
}

footer .bug-found:hover small {
  font-variation-settings: 'wght' 400 !important;
}

footer .bug-found:hover::before {
  animation: flickerAnimation .5s forwards;
}

footer .bug-found .arrow {
  transition: margin-left 100ms ease-in-out;
}

footer .bug-found:hover .arrow {
  margin-left: 0.5rem;
}

footer .footer-navigation {
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 1rem;
}

footer .footer-navigation nav {
  display: flex;
  gap: 1rem;
}

.copyright {
  font-size: var(--fs-xs);
  line-height: 1.2;
  margin-right: auto;
}

.associates {
  display: grid;
  gap: 3rem;
}

.associates div {
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.associates div strong {
  font-size: 1rem;
}

.associates div span {
  display: block;
}

time {
  display: flex;
  flex-direction: column;
  grid-row-gap: .25em;
}

time div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  font-size: small;
}

time div.line {
  text-align: center;
}

time div.project-grid {
  display: grid;
  grid-template-columns: repeat(32, minmax(1px, 1fr));
}

time div.project-grid span.project {
  background-color: var(--clr-gray-50);
  border-radius: 5px;
  padding: .25em 1em;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

time div.project-grid span.highlight {
  background-color: var(--clr-highlight);
}

time div.project-grid-1 span.project {
  grid-area: 1 / 4 / 4 / 29;
}

time div.project-grid-2 span.project {
  grid-area: 29 / 29 / 4 / 33;
}

time .line div {
  padding-top: .5em;
  position: relative;
  border-top: 1px solid  var(--clr-main-font);
}

time .line div::before {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 5px;
  background-color:  var(--clr-main-font);
}

time .line div:last-of-type {
  border-style: dashed;
}

@media only screen and (min-width: 1080px) {
  section {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "main aside"
      "main aside"
      "main aside"
      "main aside";
  }

  address {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title title"
      ". .";  
  }

  footer .footer-navigation {
    flex-direction: row-reverse;
    align-items: end;
  }

  .associates {
    grid-template-columns: repeat(3, 1fr);
  }
}


@keyframes flickerAnimation {
  0%   { opacity:1; }
  10%  { opacity:0; }
  20%  { opacity:1; }
  50%  { opacity:0; }
  60%  { opacity:1; }
  75%  { opacity:0; }
  100% { opacity:1; }
}