/* 0x30 shared styles: index pages + photo posts */
:root {
  --bg: #0b0b0b;
  --fg: #c9c9c9;
  --dim: #6b6b6b;
  --rule: #222;
  --hi: #f0f0f0;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0 auto;
  max-width: 72ch;
  padding: 3rem 1rem 4rem;
  color: var(--fg);
  background: var(--bg);
  font: 15px/1.6 var(--mono);
}
a { color: var(--hi); text-decoration: underline; text-underline-offset: 3px; }
a:hover { background: var(--hi); color: var(--bg); text-decoration: none; }
h1, h2, h3 { font-size: 1rem; font-weight: 700; color: var(--hi); margin: 2.5rem 0 .75rem; }
h1 { margin-top: 0; }
hr { border: 0; border-top: 1px dashed var(--rule); margin: 2rem 0; }
.dim { color: var(--dim); }

/* header / footer */
header, footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
header { margin-bottom: 3rem; }
footer { margin-top: 4rem; color: var(--dim); }
nav a { margin-left: 1ch; }

/* index list: trips + concerts */
.log { list-style: none; padding: 0; margin: 0; }
.log li {
  display: grid;
  grid-template-columns: 11ch 1fr;
  gap: 0 2ch;
  padding: .6rem 0;
  border-bottom: 1px solid var(--rule);
}
.log time { color: var(--dim); }
.log .what { color: var(--hi); }
.log .meta, .log .note { grid-column: 2; }
.log .meta { color: var(--dim); }
.stats { color: var(--dim); }

/* text written in the admin: lists, quotes, code and the toolbar's size/color/align */
ul, ol { margin: 1rem 0; padding-left: 3ch; }
blockquote { margin: 1.5rem 0; padding-left: 2ch; border-left: 2px solid var(--dim); }
code { padding: .1em .4ch; background: #161616; }
s { color: var(--dim); }
.t-small { font-size: .85em; }
.t-large { font-size: 1.35em; }
.t-huge { font-size: 2em; }
/* keep these hues in step with the swatches in desk-hiiow0l5/admin.css */
.c-red { color: #e69a8d; }
.c-orange { color: #e8b06e; }
.c-yellow { color: #e6d37a; }
.c-green { color: #9fd69f; }
.c-blue { color: #8fb8e8; }
.c-purple { color: #b9a2e6; }
.c-pink { color: #e6a0c4; }
.c-dim { color: var(--dim); }
.a-center { text-align: center; }
.a-right { text-align: right; }
ul.a-center, ol.a-center, ul.a-right, ol.a-right { list-style-position: inside; padding-left: 0; }
blockquote.a-center, blockquote.a-right { border-left: 0; padding-left: 0; }

/* photo post */
.post-meta { color: var(--dim); margin-bottom: 2rem; }
figure { margin: 2rem 0; }
figure img { display: block; width: 100%; height: auto; filter: grayscale(15%); }
figcaption { color: var(--dim); margin-top: .4rem; font-size: .9em; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.grid figure { margin: 0; }

@media (max-width: 480px) {
  .log li { grid-template-columns: 1fr; }
  .log .meta, .log .note { grid-column: 1; }
  .grid { grid-template-columns: 1fr; }
}