@font-face {
  font-family: "Autography";
  src: url("/fonts/Autography.otf") format("opentype");
  font-display: swap;
}
:root {
  /* placeholder palette — keep in step with index.html */
  --bg: #efe6d5;
  --ink: #615347;
  --hand: "Autography", cursive;
  --serif: "IM Fell English", Georgia, serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--serif); font-size: clamp(1.15rem, 0.5vw + 1.05rem, 1.4rem); line-height: 1.7;
}
main { max-width: 38rem; margin: 0 auto; padding: 9rem 24px 7rem; }
h1, h2 { font-family: var(--hand); text-transform: lowercase; font-weight: 400; line-height: 1.4; margin: 0; }
h1 { font-size: clamp(3.4rem, 10vw, 5.5rem); margin-bottom: 2.5rem; }
h2 { font-size: clamp(2.2rem, 6vw, 3rem); }
p { margin: 0 0 1.3em; }
.verse { font-style: italic; font-size: 1.15em; margin: 2.5em 0 0.4em; }
.ref { font-size: 0.72em; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; margin-bottom: 3em; }
.todo { font-size: 0.85em; font-style: italic; opacity: 0.6; border-left: 2px dashed currentColor; padding-left: 0.8em; }
.rule { width: 4rem; height: 1px; background: currentColor; opacity: 0.4; margin: 3.5rem 0; }
.entries { list-style: none; margin: 0; padding: 0; }
.entries li { border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
/* one compact row per entry, title on the left and date on the right, so the whole list fits on one screen */
.entries a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-direction: row-reverse; padding: 0.55rem 0 0.45rem; color: inherit; text-decoration: none; }
.entries h2 { font-size: clamp(1.7rem, 4.6vw, 2.1rem); line-height: 1.5; }
.entries li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
main:has(> .entries) h1 { margin-bottom: 1.4rem; }
.entries a:hover h2 { opacity: 0.6; }
.entries .date { font-size: 0.72em; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; }

/* the passage the whole project hangs on: set apart, centred, between two hairlines */
.scripture {
  margin: 4.5rem -1.5rem; padding: 3.2rem 1.5rem 2.8rem; text-align: center;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.scripture p { font-style: italic; font-size: 1.3em; line-height: 1.75; margin: 0; }
.scripture .turn { margin-top: 0; }
.scripture .name { font-family: var(--hand); font-style: normal; font-size: 1.7em; line-height: 1; padding: 0 0.1em; }
.scripture cite {
  display: block; margin-top: 2.2rem; font-style: normal;
  font-size: 0.72em; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.65;
}
@media (max-width: 520px) { .scripture { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } }

.appear { opacity: 0; transform: translateY(14px); transition: opacity 1.6s ease, transform 1.6s ease; }
.appear.in { opacity: 1; transform: none; }

/* text fades out beneath the logo and menu button instead of running under them */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 120px; z-index: 10; pointer-events: none;
  background: linear-gradient(var(--bg) 62%, transparent);
}

/* the voices that shaped the project: quieter than the scripture, set in from the entry */
.quote { margin: 3rem 0; padding: 0 0 0 1.6rem; border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.quote p { font-style: italic; font-size: 1.12em; line-height: 1.65; margin: 0; }
.quote cite {
  display: block; margin-top: 1rem; font-style: normal;
  font-size: 0.7em; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.65;
}

.photo { margin: 3.5rem -1.5rem; }
.photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.photo figcaption { margin-top: 0.8rem; font-size: 0.65em; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; text-align: right; }
@media (max-width: 520px) { .photo { margin-left: 0; margin-right: 0; } }

/* script letters overhang their box; give the textured elements room so the overhang isn't cut off */
h1 { padding: 0.4em 1.5rem; margin: -0.4em -1.5rem calc(2.5rem - 0.4em); }
.entries { padding: 0 1.5rem; margin: 0 -1.5rem; }

/* a single journal entry */
.post .date, .back a { font-size: 0.72em; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; }
.post .date { margin-bottom: 0.6rem; }
.post a { color: inherit; }
.back { margin-top: 4rem; }
.back a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); padding-bottom: 2px; }

.ps { margin-top: 3rem; font-style: italic; font-size: 0.92em; opacity: 0.85; }
.ps a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* phones: the set-apart scripture is a little smaller so each line of the verse stays whole */
br.m { display: none; }
.scripture .name { white-space: nowrap; }
@media (max-width: 520px) {
  br.m { display: inline; }
  .scripture p { font-size: 0.98em; line-height: 1.9; }
  .scripture { padding-top: 2.4rem; padding-bottom: 2.2rem; margin-top: 3.5rem; margin-bottom: 3.5rem; }
}

/* the songs: cover art in a simple grid, two across, one on a phone */
main.music { max-width: 52rem; }
.covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3.2rem 2.4rem; }
.covers .cover { display: block; }
/* the covers lose their blue: the background washes out to white and is multiplied into the paper,
   leaving only the drawn lines and the title, in ink, inside a faint square */
.covers .cover { border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 2px; }
.covers img {
  display: block; width: 100%; height: auto; transition: opacity 0.5s ease;
  filter: grayscale(1) brightness(1.34) contrast(1.2); mix-blend-mode: multiply; opacity: 0.72;
}
.covers .cover:hover img { opacity: 0.95; }
.covers .meta { margin-top: 0.9rem; }
.covers h2 { font-size: clamp(1.7rem, 4vw, 2.2rem); }
.covers p { margin: 0; display: flex; gap: 1.2rem; font-size: 0.66em; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; }
.covers p a { color: inherit; text-decoration: none; opacity: 0.7; padding-bottom: 2px; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.covers p a:hover { opacity: 1; }
@media (max-width: 620px) { .covers { grid-template-columns: 1fr; gap: 2.6rem; } }

/* a heading for a set of journal entries (the songs of one release) */
.group { margin: 0 0 0.7rem; font-size: 0.72em; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.7; }

/* the journal as a book's contents page */
.group { margin-top: 2.6rem; }
h1 + .group { margin-top: 0; }
.entries .num { display: inline-block; min-width: 2.1em; font-family: var(--serif); font-size: 1.05rem; opacity: 0.6; vertical-align: 0.12em; }
.entries li > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-direction: row-reverse; padding: 0.55rem 0 0.45rem; }

/* a part of the book: a section heading with its chapters listed beneath. Until it has chapters it is one quiet line. */
.group.part { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.7rem; margin-bottom: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.group.part + .group.part { margin-top: 1.5rem; }
.group.part em { font-style: normal; opacity: 0.6; margin-right: 1.4em; }
.group.part .soon { opacity: 0.55; }
.group.part:has(+ .entries) { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.7rem; }


/* a section heading that opens its own article: the name is the link, with a small pencilled open book beside it */
.group .about { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.9em; }
.group .book { width: 22px; height: 18px; overflow: visible; opacity: 0.75; transition: opacity 0.4s ease, transform 0.4s ease; }
.group .book path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.group .about:hover .book { opacity: 1; transform: translateY(-1px); }

/* on a song's page: where to hear it, under the title */
.listen-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.5rem; margin: -1.2rem 0 2.6rem; font-size: 0.68em; letter-spacing: 0.24em; text-transform: uppercase; }
.listen-row span { opacity: 0.55; }
.listen-row a { color: inherit; text-decoration: none; opacity: 0.8; padding-bottom: 2px; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.listen-row a:hover { opacity: 1; border-bottom-color: currentColor; }

/* the journal is also where the music lives: each row is the title, then where to hear it, then its date */
.entries li { display: flex; align-items: center; gap: 0.4rem 1.1rem; padding: 0.55rem 0 0.45rem; }
.entries li > a.t { display: block; padding: 0; flex: 0 1 auto; }
.entries .on { display: flex; align-items: center; gap: 0.85rem; margin-left: 0.5rem; }
.entries .on a { display: block; padding: 4px 0; color: inherit; opacity: 0.6; transition: opacity 0.4s ease, transform 0.4s ease; }
.entries .on a:hover { opacity: 1; transform: translateY(-1px); }
.entries .on svg { display: block; width: 19px; height: 19px; overflow: visible; }
.entries .on path { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.entries li > .date { margin-left: auto; white-space: nowrap; }
@media (max-width: 560px) { .entries li > .date { display: none; } .entries .on { margin-left: auto; gap: 1.1rem; } }