/*!
Theme Name: Lilly Gothe 2025
Text Domain: lg
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Lilly Gothe. Required plugins: Advanced Custom Fields Pro. See README.md for developer information and changelog.
Version: 0.0.27
License: All rights reserved
*/
@font-face {
  font-family: picnic;
  src: url(./assets/fonts/PicNic.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: unica;
  src: url(./assets/fonts/Unica77LLWeb-Regular.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: unica;
  src: url(./assets/fonts/Unica77LLWeb-Bold.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}
.card-post.is-long .post__content, .post__eyebrow, .works__caption, .site__footer {
  font-family: var(--sans);
  font-size: var(--ms--1);
  letter-spacing: 0.025em;
  font-weight: 500;
}

.post__content {
  font-family: var(--sans);
  font-size: var(--ms-0);
  letter-spacing: 0.025em;
  font-weight: 500;
  line-height: 1.4;
}

:root {
  --ratio: 1.3;
  --black: #0b0b0c;
  --white: white;
  --ms--1: calc(var(--ms-0) / var(--ratio));
  --ms-0: 1rem;
  --ms-1: calc(var(--ms-0) * var(--ratio));
  --ms-2: calc(var(--ms-1) * var(--ratio));
  --ms-3: calc(var(--ms-2) * var(--ratio));
  --baseline: calc(var(--ms-0) * 1.35);
  --padding-card: 0.6em 0.75em;
  --fast: 150ms;
  --slow: 450ms;
  --display: picnic;
  --sans: "unica", monospace;
  --border-color: rgb(75, 87, 70);
  --br: 0.25rem;
  --padding: 1rem;
}
@media (min-width: 800px) {
  :root {
    --padding: 1.5rem;
    --br: 0.4rem;
  }
}
@media (min-resolution: 120dpi) {
  :root {
    --ms-0: 0.9rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
blockquote,
dl,
dd {
  font-weight: inherit;
  font-size: inherit;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  color: currentColor;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:target {
  scroll-margin-block: 5ex;
}

button,
textarea,
select,
input,
a {
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  text-transform: inherit;
  word-spacing: inherit;
  letter-spacing: inherit;
}

/*!
Theme Name: Lilly Gothe 2025
Text Domain: lg
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Lilly Gothe. Required plugins: Advanced Custom Fields Pro. See README.md for developer information and changelog.
Version: 0.0.27
License: All rights reserved
*/
img {
  opacity: 0;
  transition: var(--fast);
  transition-delay: 50ms;
}
img.ready {
  opacity: 1;
}

/*!
Theme Name: Lilly Gothe 2025
Text Domain: lg
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Lilly Gothe. Required plugins: Advanced Custom Fields Pro. See README.md for developer information and changelog.
Version: 0.0.27
License: All rights reserved
*/
body {
  background: var(--color-background);
  padding: var(--padding);
}

.site__footer {
  margin-top: var(--padding);
}

/*!
Theme Name: Lilly Gothe 2025
Text Domain: lg
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Lilly Gothe. Required plugins: Advanced Custom Fields Pro. See README.md for developer information and changelog.
Version: 0.0.27
License: All rights reserved
*/
.home__hero {
  margin-bottom: calc(var(--padding) * 1.5);
  line-height: 1;
  font-family: var(--display);
  letter-spacing: -0.015em;
  color: var(--color-accent);
  font-size: min(15vw, var(--ms-0) * 8);
}

.works__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: flex-start;
  gap: calc(var(--padding) * 0.75);
}
.works__list > li {
  display: contents;
}

.card, .card-work, .card-post {
  list-style: none;
  border: 1px solid var(--border-color);
  margin-right: -1px;
  margin-bottom: -1px;
  background: white;
  border-radius: var(--br);
  overflow: hidden;
  display: flex;
  text-decoration: none;
  flex-basis: 100%;
}
@media (min-width: 300px) {
  .card, .card-work, .card-post {
    flex-basis: auto;
    flex-shrink: 0;
  }
}
@media (min-width: 500px) {
  .card, .card-work, .card-post {
    flex-basis: auto;
  }
}

.card-post {
  padding: var(--padding-card);
  flex-flow: column;
  flex-basis: 18em;
  color: var(--color-accent);
}
.card-post.is-long {
  flex-basis: 100%;
}
@media (min-width: 800px) {
  .card-post.is-long {
    flex-basis: 50em;
  }
}
.card-post.is-long .post__content {
  -moz-columns: 2;
       columns: 2;
}
@media (min-width: 800px) {
  .card-post.is-long .post__content {
    -moz-columns: 4;
         columns: 4;
  }
}

.post__title {
  font-family: var(--display);
  font-size: var(--ms-3);
}

.post__eyebrow {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
}

.post__pinned {
  font-size: 0;
}
.post__pinned svg {
  height: 0.75rem;
  transform: translateY(1px) rotate(-35deg);
  fill: var(--color-accent);
}

.post__content {
  -webkit-hyphens: auto;
          hyphens: auto;
  margin-top: 0.5em;
}
.post__content p + p {
  margin-top: 0.35em;
}
.post__content img {
  width: auto;
  mix-blend-mode: screen;
  max-width: 100%;
  max-height: 8em;
}
.post__content figure {
  display: inline-block;
  background-color: var(--color-accent);
}
.post__content h2 {
  margin-top: 0.75em;
  font-weight: bold;
  -moz-column-break-before: always;
       break-before: always;
}
.post__content h3 {
  font-style: italic;
  margin-top: 0.25em;
}

.card-work figure {
  flex-flow: column;
  display: flex;
  background: rgb(246, 245, 245);
}

.works__image {
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  height: auto;
}
@media (min-width: 300px) {
  .works__image {
    height: calc(8rem + 0.02rem * var(--h));
    width: auto;
  }
}
@media (min-width: 800px) {
  .works__image {
    height: calc(9rem + 0.02rem * var(--h));
  }
}

.middot {
  width: 1ch;
  display: inline-block;
}

.works__caption {
  container-type: inline-size;
  background: white;
  color: var(--color-text);
  padding: var(--padding-card);
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 0.25em;
       column-gap: 0.25em;
}

.works__title {
  font-weight: bold;
  font-style: normal;
}

.works__format,
.works__medium {
  display: none;
}

@container (min-width: 10em) {
  .works__medium {
    display: block;
  }
}
@container (min-width: 20em) {
  .works__format {
    display: block;
  }
}
.works__index {
  opacity: 0.5;
}

/*!
Theme Name: Lilly Gothe 2025
Text Domain: lg
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Lilly Gothe. Required plugins: Advanced Custom Fields Pro. See README.md for developer information and changelog.
Version: 0.0.27
License: All rights reserved
*/
.slider {
  position: relative;
  background-color: var(--background-color);
}

.slider__slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  will-change: opacity;
  transition: opacity var(--slow);
}
.slider__slide.active {
  opacity: 1;
}
.slider__slide img {
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
}
.slider__slide:first-of-type {
  position: static;
}

.slider__advance {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  font-size: 0;
}