:root{
  --baseline: 0.5rem;         /* 8px if root is 16px */
  --lh: 1.5;                  /* base line-height */
  --fs-0: clamp(0.95rem, 0.9rem + 0.2vw, 1rem);       /* body */
  --fs-1: clamp(1rem, 1.1rem + 1vw, 1.2rem);          /* h4-ish */
  --fs-2: clamp(0.9rem, 0.81rem + 2.25vw, 2.7rem);    /* h3 */
  --fs-3: clamp(2rem, 1.8rem + 5vw, 6rem);  /* h2 */
  --fs-4: clamp(2rem, 10vw, 10rem);                    /* h1 */

  /* Layout grid */
  --container: min(85%, 1300px);
  --gutter: calc(var(--baseline) * 2); /* 16px at 16px base */
  --slug: calc(var(--baseline) * 3);

  --font-display: "Palette Mosaic", system-ui, sans-serif;
  --font-body: "Questrial", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Accents */
  --stroke: 2px;
  --radius: 8px;

  cursor: crosshair;
}

/* Typographic hierarchy */
h1, h2, h3{ 
    font-size: var(--fs-4);
    margin: calc(var(--baseline) * .5) 0 calc(var(--baseline) * .5);
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-transform: uppercase;
  }
h2{ font-size: var(--fs-3); }
h3{ font-size: var(--fs-2); }
h4{ 
    font-size: var(--fs-1); 
    font-family: var(--font-body);
    margin: calc(var(--baseline) * .5) 0 calc(var(--baseline) * .5);
  }
p{  font-size: var(--fs-0);
    margin: calc(var(--baseline) * .5) 0 calc(var(--baseline) * .5); 
    max-width: 70ch;
}

strong{color: orangered}

hr.rounded {
  border-top: calc(var(--baseline) / 2) solid black;
  border-radius: var(--radius);
  border-bottom: calc(var(--baseline) / 2) solid black;
}

body{
  font: 400 var(--fs-0) / var(--lh) var(--font-body);
  background: whitesmoke;
  background-image: radial-gradient(gainsboro 1px, transparent 0);
  background-size: 0.5rem 0.5rem;
  background-attachment: fixed;
}

.float{
  display: block;
  text-align: center;
  width: var(--container);
  padding: var(--baseline);
  padding-inline: var(--gutter);
  margin: 25vh auto var(--slug);
}

.navigation{
  position: fixed;
  left: 0;
  right: 0;
  width: var(--container);
  padding: var(--baseline);
  padding-inline: var(--gutter);
  margin: auto;
}

.card{
  padding-inline: var(--gutter);
  border: var(--stroke) solid darkturquoise;
  background: whitesmoke;
  border-radius: var(--radius);
  padding: var(--baseline);
  box-shadow: 6px 6px 0 0 darkturquoise;
}

button{
  font-family: var(--font-body);
  font-size: var(--fs-0);
  margin: calc(var(--baseline) * .5) 0 calc(var(--baseline) * .5); 
  max-width: 70ch;
  display: inline-block;
  padding: var(--baseline);
  border: var(--stroke) solid black;
  border-radius: var(--radius);
  background: gold;
  margin-top: var(--baseline);
  transition-duration: 0.4s;
  cursor: pointer;
}

button:hover{
  font-family: var(--font-body);
  font-size: var(--fs-0);
  margin: calc(var(--baseline) * .5) 0 calc(var(--baseline) * .5); 
  max-width: 70ch;
  display: inline-block;
  padding: var(--baseline);
  border: var(--stroke) solid black;
  border-radius: var(--radius);
  background: orangered;
  margin-top: var(--baseline);
}

.cycle{
  border: 0px solid whitesmoke;
  overflow: hidden;
  height: calc(var(--fs-4) * 1.1);
}

.cycle span {
  position: relative;
  display: inline-block;
  animation: hero-animation 12s ease infinite;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6);   
  grid-gap: var(--gutter);
  width: var(--container);
}

.grid-title { grid-area:  1 / 1 / 2 / 5;
  padding-inline: var(--gutter);
  border: var(--stroke) solid darkturquoise;
  background: whitesmoke;
  border-radius: var(--radius);
  padding: var(--baseline) calc(var(--baseline) * 3);
  box-shadow: 6px 6px 0 0 darkturquoise;
}

.grid-text-1 { grid-area: 2 / 3 / 4 / 7;   
  border: var(--stroke) solid orangered;
  background: whitesmoke;
  border-radius: var(--radius);
  padding: calc(var(--baseline) * 3);
  box-shadow: 6px 6px 0 0 orangered;}

.grid-text-2 { grid-area: 4 / 1 / 6 / 5; 
  border: var(--stroke) solid orangered;
  background: whitesmoke;
  border-radius: var(--radius);
  padding: calc(var(--baseline) * 3);
  box-shadow: 6px 6px 0 0 orangered;} 

.grid-image { grid-area: 2 / 1 / 4 / 3;   
  padding-inline: var(--gutter);
  border: var(--stroke) solid black;
  background: whitesmoke;
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 0 black;}

  
@media only screen and (max-width: 800px) {
  .grid-title { grid-area: 1 / 1 / 3 / 7; }
  .grid-text-1 { grid-area: 5 / 1 / 6 / 7; }
  .grid-text-2 { grid-area: 6 / 1 / 7 / 7; }
  .grid-image { grid-area:  3 / 1 / 5 / 7; } 
}

#Portfolio { display: none;}

img{
height: 100%;
width: 100%;
object-fit: scale-down;
overflow: hidden;
}

@keyframes hero-animation {
  0%, 20%, 100% {
    transform: translateY(0);
  }
  25%, 45% {
    transform: translateY(calc(var(--fs-4) * -1.1));
  }
  50%, 70% {
    transform: translateY(calc(var(--fs-4) * -2.2));
  }
  75%, 95% {
    transform: translateY(calc(var(--fs-4) * -3.3));
  }
}