/* Design D — A's layout and type, set on C's dark ink ground.
   Loaded after ../styles.css; only overrides colour. */

:root {
  --paper: #1f1917;
  --paper-deep: #2a2220;
  --ink: #f2ead8;
  --charcoal: #e6dcc8;
  --faded: #a89a88;
  --emerald: #4fb48f;
  --magenta: #d05c8c;
  --amber: #d99a2b;
  --violet: #a68fd0;
  --rule: rgba(242, 234, 216, 0.3);
  --hair: rgba(242, 234, 216, 0.16);
}

/* light grain instead of dark grain */
body::before {
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.91 0 0 0 0 0.84 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

nav { border-bottom-color: var(--hair); }

.btn:hover { color: var(--paper); }
.btn.tint:hover { color: var(--paper); }

/* hero watercolour is on cream paper: hang it as a framed plate */
.hero-art img {
  border: 1px solid rgba(242, 234, 216, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.feature .cover img {
  border-color: rgba(242, 234, 216, 0.16);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}
.book .jacket {
  display: block;
  border-color: rgba(242, 234, 216, 0.14);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.book:hover .jacket { box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6); }

.stripe {
  border-top-color: var(--hair);
  border-bottom-color: var(--hair);
}

.portrait img {
  border-color: var(--hair);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  filter: grayscale(28%) sepia(8%);
}
.portrait::after { border-color: rgba(242, 234, 216, 0.22); }

.reading li,
.credits-list li { border-bottom-color: var(--hair); }

.card {
  background: rgba(242, 234, 216, 0.03);
  border-color: rgba(242, 234, 216, 0.2);
}
.card::before { border-color: rgba(242, 234, 216, 0.08); }

/* crows are on cream paper: no multiply on dark, fade the paper out */
.signup .ornament {
  mix-blend-mode: normal;
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(ellipse 52% 56% at 50% 52%, #000 38%, transparent 78%);
  mask-image: radial-gradient(ellipse 52% 56% at 50% 52%, #000 38%, transparent 78%);
}

footer { border-top-color: var(--hair); }
footer a { border-bottom-color: rgba(242, 234, 216, 0.3); }