/* keinomieli.com: a quiet page of text, the contents on the left. The
   wizard's purple and gold only as accents. */

:root {
  --paper: #faf7f0;
  --ink: #26222b;
  --quiet: #6e6874;
  --rule: #e4ddcf;
  --purple: #4a2f6e;
  --gold: #a87a1e;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16131b;
    --ink: #e9e3d6;
    --quiet: #a39cab;
    --rule: #332c3d;
    --purple: #c3a6ec;
    --gold: #d9ac52;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0 auto;
  max-width: 62rem;
  padding: 3rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: 11rem minmax(0, 40rem);
  gap: 3.5rem;
  color: var(--ink);
  background: var(--paper);
  font: 1.0625rem/1.65 Charter, "Bitstream Charter", "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif;
}

/* The contents. */
.contents { position: sticky; top: 3rem; align-self: start; }
.contents .home {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
  color: var(--ink); text-decoration: none;
}
.contents .home img { width: 96px; height: 96px; }
.contents .home span { font-variant: small-caps; letter-spacing: 0.06em; font-size: 1.25rem; }
.contents ul {
  list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0;
  border-top: 1px solid var(--rule);
}
.contents li { margin: 0.35rem 0; }
.contents li a { color: var(--quiet); text-decoration: none; }
.contents li a:hover { color: var(--purple); }
.contents li a[aria-current="page"] { color: var(--ink); }
.contents li a[aria-current="page"]::before { content: "\2726  "; color: var(--gold); }

/* The page. */
main { min-width: 0; }
h1, h2, h3 { font-weight: normal; line-height: 1.25; }
h1 { font-size: 2rem; margin: 0 0 1rem; }
h2 { font-size: 1.35rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.1rem; margin: 2rem 0 0.5rem; }
p, ul, ol, blockquote, pre { margin: 0 0 1.1rem; }
a { color: var(--purple); text-underline-offset: 0.15em; }
a:hover { color: var(--gold); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
blockquote { margin-left: 0; padding-left: 1.1rem; border-left: 2px solid var(--gold); color: var(--quiet); }
code, pre { font: 0.9em/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; }
pre { overflow-x: auto; padding: 0.9rem 1rem; border: 1px solid var(--rule); }
img { max-width: 100%; height: auto; }
.quiet { color: var(--quiet); }
.back { margin-top: 3rem; }

/* Lists of posts and files. */
.posts, .files { list-style: none; padding: 0; }
.posts li { display: flex; gap: 1.25rem; padding: 0.35rem 0; }
.posts time, .posts .timeless { flex: none; width: 9.5rem; color: var(--quiet); font-variant-numeric: tabular-nums; }
.files li { padding: 0.35rem 0; }

/* Pictures to download. */
.grid {
  display: grid; gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  margin: 1.5rem 0 2rem;
}
.grid figure { margin: 0; }
.grid a { position: relative; display: block; aspect-ratio: 1; border: 1px solid var(--rule); }
.grid a:hover { border-color: var(--gold); }
/* Any shape fits the square, whole, at its middle, without stretching it. */
.grid img { position: absolute; inset: 0.75rem; width: calc(100% - 1.5rem); height: calc(100% - 1.5rem); object-fit: contain; }
.grid figcaption { margin-top: 0.4rem; font-size: 0.9rem; color: var(--quiet); }

/* A phone: the contents across the top, the page below. */
@media (max-width: 44rem) {
  body { display: block; padding: 1.5rem 1.1rem 3rem; }
  .contents { position: static; margin-bottom: 2rem; }
  .contents .home { flex-direction: row; align-items: center; }
  .contents .home img { width: 48px; height: 48px; }
  .contents ul { display: flex; gap: 1.5rem; margin-top: 1rem; padding-top: 0.75rem; }
  .contents li { margin: 0; }
  .posts li { flex-direction: column; gap: 0; }
  .posts time { width: auto; font-size: 0.9rem; }
  .posts .timeless { width: auto; font-size: 0.9rem; }
}