:root {
  --design-card-radius: 7px;
  --design-section-spacing: 72px;
  --design-background-image: none;
}

body {
  background-color: var(--paper);
  background-image: var(--design-background-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--ink) 7%, transparent);
}

.site-nav a:hover,
.admin-shortcut:hover {
  color: var(--red);
}

.hero {
  background:
    radial-gradient(ellipse at 82% 18%, color-mix(in srgb, var(--red) 12%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--paper) 94%, var(--white)), var(--paper));
}

.content-section {
  border-block: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

.writer-band {
  background: color-mix(in srgb, var(--white) 74%, var(--green) 26%);
}

.submission-band {
  background: linear-gradient(115deg, color-mix(in srgb, var(--green) 88%, var(--ink)), var(--green));
}

.work-card,
.writer-card {
  box-shadow: 0 5px 18px color-mix(in srgb, var(--ink) 5%, transparent);
}

.work-card:hover,
.writer-card:hover {
  border-color: var(--red);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--ink) 12%, transparent);
}

.hero-search,
.directory-search,
.submission-form,
.media-links a {
  border-color: var(--line);
}

.hero-search button,
.directory-search button,
.solid-link {
  border-radius: max(0px, calc(var(--design-card-radius) - 3px));
  background: var(--green);
  transition: background .2s ease, transform .2s ease;
}

.hero-search button:hover,
.directory-search button:hover,
.solid-link:hover {
  background: var(--red);
  transform: translateY(-1px);
}

.outline-link {
  border-color: var(--green);
  border-radius: max(0px, calc(var(--design-card-radius) - 3px));
  color: var(--green);
}

.text-link {
  border-color: var(--red);
}

.site-footer {
  background: color-mix(in srgb, var(--paper) 84%, var(--white));
}

.submission-form {
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--ink) 7%, transparent);
}

.submission-form :is(input, textarea) {
  border-color: var(--line);
  border-radius: max(0px, calc(var(--design-card-radius) - 3px));
  background: color-mix(in srgb, var(--white) 82%, var(--paper));
  color: var(--ink);
}

.reading-page > [data-work-detail] {
  padding: clamp(18px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--design-card-radius);
  background: var(--white);
  box-shadow: 0 14px 42px color-mix(in srgb, var(--ink) 7%, transparent);
}

.content-section,
.writer-band,
.submission-band,
.directory-page,
.reading-page {
  padding-block: var(--design-section-spacing);
}

.work-card,
.writer-card,
.reading-image,
.writer-profile img,
.submission-form,
.directory-search,
.hero-search {
  border-radius: var(--design-card-radius);
}

:root[data-design-card="solid"] .work-card,
:root[data-design-card="solid"] .writer-card {
  background: var(--white);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--ink) 9%, transparent);
}

:root[data-design-card="outline"] .work-card,
:root[data-design-card="outline"] .writer-card {
  background: transparent;
  border: 1px solid var(--line);
  box-shadow: none;
}

:root[data-design-border="dashed"] .work-card,
:root[data-design-border="dashed"] .writer-card,
:root[data-design-border="dashed"] .reading-image,
:root[data-design-border="dashed"] .writer-profile img {
  border-style: dashed;
}

:root[data-design-border="ornamental"] .work-card,
:root[data-design-border="ornamental"] .writer-card,
:root[data-design-border="ornamental"] .reading-image,
:root[data-design-border="ornamental"] .writer-profile img {
  border: 2px double var(--red);
}

:root[data-design-hero="centered"] .hero {
  grid-template-columns: 1fr;
  min-height: 480px;
  text-align: center;
}

:root[data-design-hero="centered"] .hero-copy {
  justify-self: center;
}

:root[data-design-hero="centered"] .hero-description,
:root[data-design-hero="centered"] .hero-search {
  margin-inline: auto;
}

:root[data-design-hero="centered"] .hero-art {
  display: none;
}

:root[data-design-hero="art-led"] .hero {
  grid-template-columns: .8fr 1.2fr;
}

:root[data-design-hero="art-led"] .hero-art {
  order: -1;
}

@media (max-width: 760px) {
  body {
    background-attachment: scroll;
  }

  .content-section,
  .writer-band,
  .submission-band,
  .directory-page,
  .reading-page {
    padding-block: min(var(--design-section-spacing), 56px);
  }

  .site-header {
    position: relative;
  }

  :root[data-design-hero="art-led"] .hero {
    grid-template-columns: 1fr;
  }
}