@layer base, layout, typography;

:root {
  --space: 0.25rem;

  --max-width: 56rem;

  --brighter: oklch(100% 0 0);
  --bright  : oklch(97% 0 0);
  --subtler : oklch(82% 0 0);
  --subtle  : oklch(74% 0 0);
  --dark    : oklch(35% 0 0);
  --darker  : oklch(20% 0 0);
  --darkest : oklch(0% 0 0);

  --font-body: "Crimson Text", serif;
  --font-mark: "Roboto Condensed", sans-serif;

  --bold  : 600;
  --bolder: 700;

  --tighter : -0.025em;
  --wide    : 0.05em;

  --text-base  : calc(1.2 * 1rem);
  --text-smaller : calc(0.66 * var(--text-base));
  --text-small : calc(0.88 * var(--text-base));
  --text-large : calc(1.12 * var(--text-base));
  --text-larger: calc(1.48 * var(--text-base));
}


@layer base {
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}


@layer layout {
  body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
    width: 100vw;
  }

  body > header {
    box-sizing: content-box !important;

    width: min(var(--max-width), calc(100vw - 8rem));
    margin-inline: auto;
    padding-inline: 0;

    margin-block: 4rem 0;
    padding-block: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  body > main {
    width: min(var(--max-width), calc(100vw - 8rem));
    margin-inline: auto;
    flex-grow: 2;
  }

  body > footer {
    box-sizing: content-box !important;

    width: min(var(--max-width), calc(100vw - 8rem));
    margin-inline: auto;
    padding-inline: 2.5rem;

    border-top: 0.2rem solid var(--brighter);
    padding-block: 1em 2em;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  body > header > img {
    width: auto;
    height: 5.5rem;
    align-self: flex-start;
    position: relative;
    left: -0.5rem;
  }

  body > header > ul {
    margin-top: calc(4 * var(--space));
    display: flex;
    flex-direction: row;
    gap: 0 calc(3 * var(--space));
  }

  @media (width >= 36rem) {
    body > header {
      flex-direction: row;
      justify-content: space-between;
    }

    body > header > ul {
      flex-direction: column;
      align-self: flex-end;
      align-items: flex-end;
    }

    body > footer {
      flex-direction: row;
      justify-content: space-between;
      align-self: flex-end;
      align-items: flex-start;
    }
  }

}


@layer typography {
  body {
    background: var(--bright);
    color: var(--dark);
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding-inline: 2em !important;
  }

  body > footer {
    color: var(--subtler);
    font-family: var(--font-mark);
    font-size: var(--text-smaller);
  }

  body > footer address {
    font-style: italic;
  }

  header {
    color: var(--darker);
  }

  h1, h2,  h3, h4,
  body > header > img, body > header a[href^="mailto:"] {
    font-family: var(--font-mark);
    font-weight: var(--bolder);
    font-style: italic;
    letter-spacing: var(--tighter);
    color: var(--darker);
  }

  h1,
  header > img {
    text-transform: uppercase;
    font-size: var(--text-large);
  }

  header > img {
    font-size: var(--text-larger);
    box-sizing: content-box;
  }

  body > header a[href^="mailto:"] {
    font-size: var(--text-small);
  }

  h2, h3, h4 {
    font-size: var(--text-base);
  }

  body > header,
  h1, h2, h3 {
    z-index: 0;
    position: relative;
  }

  body > header {
    --slant: -8deg;
    --radius: 0.5em;
    padding-inline: 2rem;
    padding-block: 2rem 1.8rem;
  }

  h1, h2, h3 {
    --slant: -10deg;
    --radius: 0.2rem;
  
    display: inline-block;
    padding: 0.4em 0.5em;
    left: -0.5em;
    line-height: 1;
    margin-block: 4rem 0;
  }

  p {
    margin-block: 0.7rem;
  }

  body > header::before,
  h1::before, h2::before, h3::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--brighter);
    border-radius: var(--radius);
    transform-origin: center;
    transform: skewX(var(--slant));
  }

  body > header li > a[href^="mailto:"] {
    padding-inline: 0.2em;
  }

  body a {
    color: inherit;
  }

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

  body > footer a:hover,
  body > footer a:active {
    color: var(--subtle);
  }

  body a:active {
    color: var(--darkest);
  }

  header a {
    text-decoration: none;
  }

  a:hover, a:active,
  header a:hover, header a:active {
    text-decoration: underline;
  }

  a[href^="mailto:"] span::before {
    display: inline-block;
    padding-inline: calc(1/2 * var(--space));
    text-decoration: none;
  }

  a:has(i.fab.fa-instagram):hover {
    color: oklch(65.6% 0.241 354.308);
  }

  a:has(i.fab.fa-instagram):active {
    color: oklch(59.2% 0.249 0.584);
  }

  a:has(i.fab.fa-square-facebook):hover {
    color: oklch(54.6% 0.245 262.881);
  }

  a:has(i.fab.fa-square-facebook):active{
    color: oklch(48.8% 0.243 264.376);
  }

}

main.construction {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: flex-start;
  flex-grow: 0;
  margin-top: 2rem;
}

/*
main.mosaic {
  --ratio-w: 1;
  --ratio-h: 1;
  --mw: var(--max-width);

  --gap-x: calc(8 * var(--space));
  --gap-y: calc(8 * var(--space));

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap-y) var(--gap-x);
  justify-content: space-between;

  padding: 0;
}


main.mosaic > div {
  --h: calc(100 * var(--space));

  height: var(--h);
  width: calc( (var(--ratio-w) / var(--ratio-h)) * var(--h) );
  margin: 0;
  padding: 0;

  background: black;
}


.ratio-3-2 {
  --ratio-w: 3;
  --ratio-h: 2;
}


.ratio-2-3 {
  --ratio-w: 2;
  --ratio-h: 3;
}


.ratio-1-1 {
  --ratio-w: 1;
  --ratio-h: 1;
}

main.mosaic > div:nth-of-type(2n+1):has(+ div.ratio-3-2),
main.mosaic > div.ratio-3-2 + div:nth-of-type(2n) {
  --h: calc( (var(--mw) - var(--gap-x)) / (var(--ratio-w)/var(--ratio-h) + 3/2) );
}

main.mosaic > div:nth-of-type(2n+1):has(+ div.ratio-2-3),
main.mosaic > div.ratio-2-3 + div:nth-of-type(2n)  {
  --h: calc( (var(--mw) - var(--gap-x)) / (var(--ratio-w)/var(--ratio-h) + 2/3) );
}

main.mosaic > div:nth-of-type(2n+1):has(+ div.ratio-1-1),
main.mosaic > div.ratio-1-1 + div:nth-of-type(2n)  {
  --h: calc( (var(--mw) - var(--gap-x)) / (var(--ratio-w)/var(--ratio-h) + 1/1) );
}

main.mosaic > div:nth-last-of-type(2n+1)  {
  --h: calc( (var(--mw) - var(--gap-x)) / (var(--ratio-w)/var(--ratio-h) + var(--ratio-h)/var(--ratio-w)) );
}
*/