@import "variables.css";

:root {
  --page-width: 55rem;
  --border-width: 1.4rem;
}

html {
  background: var(--color-background);
}

body {
  max-width: var(--page-width);
  margin: auto;
  min-height: 100vh;
  background: var(--color-page);
  text-align: center;
  position: relative;
  container-type: inline-size;
}

@media (max-width: 55rem) {
  body {
    overflow-x: hidden;
  }
}

body::before {
  display: block;
  position: absolute;
  content: "";
  --half-border-width: calc(var(--border-width) / 2);
  margin: calc(0px - var(--half-border-width));
  width: calc(100% - var(--border-width));
  max-width: calc(var(--page-width) - var(--border-width));
  height: calc(100% + var(--half-border-width));
  border-left: var(--border-width) dotted var(--color-dots);
  border-right: var(--border-width) dotted var(--color-dots);
  border-image: url("/style/border.svg") 25% 37.5% round;
  pointer-events: none;
  z-index: 2;
}

body * {
  position: relative;
  z-index: 1;
}

img {
  height: auto;
}

header {
  background: linear-gradient(var(--color-fade), var(--color-page));
}

.banner {
  min-width: 80%;
  max-width: calc(100% - var(--border-width) - 10cqw);
  padding-top: 7cqw;
  padding-bottom: 5cqw;
  user-select: none;
}

.decoration {
  position: relative;
  z-index: 0;
}

.summary {
  position: relative;
}

.summary ul {
  position: relative;
  font-family: serif;
  color: var(--color-text);
  text-shadow:
    2px 0 var(--color-page),
    -2px 0 var(--color-page),
    0 2px var(--color-page),
    0 -2px var(--color-page),
    1px 1px var(--color-page),
    -1px -1px var(--color-page),
    1px -1px var(--color-page),
    -1px 1px var(--color-page);
  line-height: max(3cqw, 1rem);
  text-transform: lowercase;
  list-style: none;
  padding: 0 10cqw;
  font-size: 0;
  text-wrap: balance;
}

.summary li {
  display: inline;
  font-size: max(2.7cqw, 1.3rem);
  line-height: 5cqw;
  white-space: nowrap;
  margin: 0 -1.2em;
}

.summary li::before,
.summary li::after {
  content: "•";
  color: var(--color-accent);
  opacity: 0.5;
  padding: 1em;
  pointer-events: none;
}

.summary-dots {
  position: absolute;
  top: 0;
}

.floating-image {
  position: absolute;
  display: flow-root;
  user-select: none;
}

h1 {
  color: var(--color-text);
  margin: 4cqw 2cqw 8cqw;
  font-family: serif;
  font-size: max(5.5cqw, 2rem);
  text-transform: lowercase;
  line-height: 1.2em;
  letter-spacing: 1cqw;
}

p {
  color: var(--color-text);
  font-family: sans-serif;
  font-size: max(2.5cqw, 1rem);
  font-weight: 400;
  margin: 3.5cqw 7cqw;
  letter-spacing: 0.2em;
  hyphens: auto;
}

a {
  color: var(--color-text);
  text-decoration: var(--color-accent) wavy underline;
  white-space: nowrap;
}

a:hover {
  text-shadow: 0.1em 0 var(--color-accent);
}

.photo-spread {
  mask-image: url(/style/photo-mask.svg);
  mask-size: 100%, 100%;
  mask-position: center;
  mask-repeat: no-repeat;
}

.photo-spread img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
  user-select: none;
}

footer {
  width: 100%;
  height: 31cqw;
  background: linear-gradient(var(--color-page), var(--color-fade));
  padding-top: 6cqw;
  user-select: none;
}

::selection {
  background: var(--color-accent);
  color: var(--color-text);
  text-shadow: none;
}