:root {
  --color-top: #f6feff;
  --color-bottom: #d5ffd9;
  --color-header: #3d3555;
  --color-text: #9a8fba;
  --color-accent: #c18fc9;
  --color-border: #d7deb5;
  --color-link: #f5d844;

  --width: 55rem;
  --border-width: 1.4rem;
}

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

body {
  max-width: var(--width);
  margin: auto;
  min-height: 100vh;
  background: var(--color-bottom);
}

.content {
  min-height: 100vh;
  position: relative;
}

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

.header {
  background: linear-gradient(var(--color-top), var(--color-bottom));
  padding-top: 4rem;
  padding-bottom: 0.1rem;
  text-align: center;
}

.header-banner {
  min-width: 80%;
  max-width: calc(100% - var(--border-width) - 2rem);
  margin-bottom: 2rem;
  user-select: none;
}

.header-info {
  position: relative;
}

.header-info ul {
  font-family: serif;
  font-size: 1.45rem;
  line-height: 0.8;
  text-transform: lowercase;
  list-style: none;
}

.header-info li {
  display: inline;
  hyphens: auto;
}

.header-info li + li::before {
  content: " • ";
  white-space: pre;
  letter-spacing: 0.2rem;
}

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

h1 {
  color: var(--color-header);
  margin-top: 4rem;
  font-family: serif;
  font-size: 3rem;
  text-transform: lowercase;
  text-align: center;
  line-height: 3.5rem;
  letter-spacing: 0.4rem;
  hyphens: auto;
}

p {
  color: var(--color-header);
  font-family: sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  margin: 2rem 4rem;
  letter-spacing: 0.2rem;
  text-align: center;
  hyphens: auto;
}

p a {
  color: var(--color-link);
  font-weight: 800;
  text-decoration: none;
}

p a:hover {
  text-decoration: underline;
}

.photo-spread {
  width: 100%;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
  mask-size: 100%, 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  user-select: none;
}

.footer {
  width: 100%;
  height: 17rem;
  background: linear-gradient(var(--color-bottom), var(--color-top));
  text-align: center;
  padding-top: 3rem;
  user-select: none;
}