/* Settings */
/****************************************/
:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

  --space: var(--space-m);

  --text--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --text-s: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --text-m: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --text-l: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --text-xl: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --text-2xl: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --text-3xl: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --text-5xl: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);

  --text: var(--text-m);
}

/* Reset */
/****************************************/
*, :before, :after { box-sizing: border-box; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

img, picture {
  max-width: 100%;
}
picture > img {
  object-fit: contain;
}

article img, article picture {
  max-height: 45dvh;
}

/* Layout */
/****************************************/

body {
  min-height: 100dvh;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-areas:
    "nav"
    "header"
    "main"
    "aside"
    "footer";
  grid-template-rows: calc(var(--space) * 3) min-content auto auto calc(var(--space) * 2);
}

@media screen and (width >= 550px) {
  body {
    grid-template-areas:
      "nav nav"
      "header header"
      "main aside"
      "footer footer";
    grid-template-columns: 1fr minmax(max-content, 25%);
    grid-template-rows: calc(var(--space) * 3) min-content auto calc(var(--space) * 2);
  }
}

body > nav { grid-area: nav; }
body > header { grid-area: header; }
body > aside { grid-area: aside; }
body > main { grid-area: main; }
body > footer { grid-area: footer; }

main {
  padding: 2rem;
}

article {
  max-width: 60ch;
  margin: 0;
}

.l-stack > * { margin: 0; }
.l-stack > * + * { margin-top: var(--space); }

.l-cluster {
  display: flex;
  flex-flow: row wrap;
  justify-items: flex-start;
  align-items: center;
  gap: var(--space);
}

.l-splitter {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space);
}


/* Typography */
/****************************************/

:root {
  --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-family: var(--system-ui);

  font-size: var(--text);
  --text-color: black;
}

h1, h2, h3, h4, h5, h6 { margin: 0; margin-bottom: 1em; }

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-l); }
h6 { font-size: var(--text-m); }

a, a:visited {
  --link-color: teal;
  color: var(--link-color);
  font-weight: bold;
  text-decoration: underline 3px dotted var(--link-color);
}
a:hover, a:active {
  text-decoration: underline 3px solid var(--link-color);
}

/* Gradient hover text! */
/* a {
  &:hover {
    background-image: linear-gradient(to right, #f88f1e, #a24fe2, #4f80e2);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
} */

button, .button {
  font-size: 1em;
  padding: 0.5em 1em;
  color: black;
  background-color: white;
  border: 5px solid teal;
  cursor: pointer;
}

button:hover, .button:hover {
  color: white;
  background-color: teal;
}

/* Components */
/****************************************/

.c-site-nav {
  padding: var(--space);
}

.c-site-footer {
  padding: var(--space);
}

.c-archive-sidebar {
  padding: var(--space);
}

.c-gallery-photo-grid {
  --gap: var(--space-s);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(33% - var(--gap)), 1fr));
  grid-auto-rows: minmax(100px, max-content);
  gap: var(--gap);
}

.c-gallery-photo-grid > a {
  display: grid;
  justify-items: stretch;
  align-items: stretch;
}

.c-gallery-photo-grid img {
  object-fit: cover;
  object-position: center;
}

.c-gallery-photo-grid:hover img, .c-gallery-photo-grid:focus-within a img {
  filter: brightness(50%);
}
.c-gallery-photo-grid:hover img:hover, .c-gallery-photo-grid:focus-within a:focus img {
  filter: brightness(100%);
}


/* Utility */
/****************************************/

.space\:xxs { --space: var(--space-xxs); }
.space\:xs { --space: var(--space-xs); }
.space\:s { --space: var(--space-s); }
.space\:m { --space: var(--space-m); }
.space\:l { --space: var(--space-l); }
.space\:xl { --space: var(--space-xl); }
.space\:2xl { --space: var(--space-2xl); }
.space\:3xl { --space: var(--space-3xl); }
.space\:5xl { --space: var(--space-5xl); }