/* Mistynotes-inspired instance theme for WriteFreely.
   Original theme by Mistynotes (2020), CC BY 4.0:
   https://write.as/themes/mistynotes
   Adapted for instance navigation, forms, and reader cards. */

:root {
  --paper: #faf9f5;
  --canvas: #f2f1ed;
  --ink: #403d38;
  --muted: #787065;
  --accent: #943526;
  --line: #dedbd3;
}

body:has(#official-writing),
body#post,
body#subpage,
body#collection {
  background: var(--canvas);
  color: var(--ink);
}

body:has(#official-writing) > header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(68, 51, 40, .05);
}

body:has(#official-writing) > header h2 a,
body:has(#official-writing) > header h1 a {
  color: var(--accent);
  font-weight: 700;
}

body:has(#official-writing) > header nav a {
  color: var(--ink);
}

body:has(#official-writing) > header nav a:hover,
body:has(#official-writing) > header nav a.selected {
  color: var(--accent);
}

#official-writing {
  color: var(--ink);
}

#official-writing > .content-container,
#official-writing > .error-page,
#official-writing > form,
#official-writing > .login {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(68, 51, 40, .055);
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

#official-writing h1,
#official-writing h2,
body#collection .post-title {
  color: var(--accent);
}

#official-writing h1 {
  font-weight: 700;
  letter-spacing: -.02em;
}

#official-writing h2 {
  font-weight: 650;
}

#official-writing a:not(.bt),
body#collection #wrapper a {
  color: var(--accent);
}

#official-writing a:hover,
body#collection #wrapper a:hover {
  text-decoration: underline;
}

body#collection #wrapper article {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(68, 51, 40, .055);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-sizing: border-box;
  margin-bottom: 1.25rem;
}

body#post > header,
body#subpage > header,
body#collection:not(:has(#official-writing)) > header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

body#post #blog-title a,
body#subpage #blog-title a,
body#collection #blog-title a {
  color: var(--accent);
}

body#post article#post-body,
body#subpage article {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(68, 51, 40, .055);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

body#post article#post-body h1,
body#post article#post-body h2,
body#subpage article h1,
body#subpage article h2 {
  color: var(--accent);
}

body#post article#post-body a,
body#subpage article a {
  color: var(--accent);
}

body#collection #wrapper article .source,
body#collection #wrapper article time,
body#collection #wrapper article .dt-published {
  color: var(--muted);
}

#official-writing input:not([type="checkbox"]):not([type="radio"]),
#official-writing textarea,
#official-writing select {
  background: #fff;
  border: 1px solid #cfcac1;
  border-radius: 7px;
  color: var(--ink);
  box-sizing: border-box;
}

#official-writing input:focus,
#official-writing textarea:focus,
#official-writing select:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(148, 53, 38, .18);
  outline-offset: 1px;
}

#official-writing button,
#official-writing input[type="submit"],
#official-writing .bt {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 7px;
  color: #fff;
}

#official-writing button:hover,
#official-writing input[type="submit"]:hover,
#official-writing .bt:hover {
  background: #76291e;
  border-color: #76291e;
}

body:has(#official-writing) > footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  color: var(--muted);
}

@media (max-width: 600px) {
  #official-writing > .content-container,
  #official-writing > .error-page,
  #official-writing > form,
  #official-writing > .login,
  body#collection #wrapper article {
    border-radius: 8px;
    padding: 1rem;
  }
}