/* jacobbeaudin.com/writing/. A quiet reading room behind the home page.
   One text face (Newsreader), one column, hierarchy by size and tone.

   PALETTE. Every color on these pages is one of the tokens below; nothing
   further down names a color. Two presets ship, each with light and dark:

     landscape  paper, deep teal, International Orange (the loss landscape)
     board      cardstock, walnut, racing red (the board game)

   Pick one with an attribute on <html>:  <html lang="en" data-palette="board">
   With no attribute the landscape preset applies. To retire the attribute,
   delete the preset you are not using and drop the selector on the other.
   Light and dark follow the OS; data-theme="light" or "dark" on <html>
   pins one, so the home page can hand its choice down.

   Token roles:
     --bg        page ground            --bg-2     code block, quiet surfaces
     --ink       body text              --grey     metadata, captions, notes
     --rule      hairlines              --deep     the second hue: resting
                                                    link lines, figure runs
     --accent    the one loud mark: hover line, focus ring, figure end, endmark
     --accent-ink  --accent deepened for small text (the draft label)
     --select    text selection */

/* landscape: values from r5/landscape (paper #eee8dc, ink #1c2427, deep
   water #1f4a55, International Orange #c0362c / #e2553f). In dark, the deep
   water is too dark to draw with, so lines use its fog green #7fa39a. */
:root,
:root[data-palette="landscape"] {
  --bg:         light-dark(#eee8dc, #0f171a);
  --bg-2:       light-dark(#e6dfd0, #131d21);
  --ink:        light-dark(#1c2427, #e9e3d6);
  --grey:       light-dark(#4b5658, #b4b3a8);
  --rule:       light-dark(rgb(28 36 39 / 0.18), rgb(233 227 214 / 0.16));
  --deep:       light-dark(#1f4a55, #7fa39a);
  --accent:     light-dark(#c0362c, #e2553f);
  --accent-ink: light-dark(#a32a21, #f07a62);
  --select:     light-dark(#c9d8d6, #24434a);
}

/* board: values from r5/board (cardstock #f4ecdc, ink #22252e, walnut
   #5b4232, racing red #c42b3c, muted #5d5a55). The board has no dark mode;
   the dark half here is derived: the walnut table at night as ground,
   cardstock as ink, walnut and red lifted until they read on it. */
:root[data-palette="board"] {
  --bg:         light-dark(#f4ecdc, #1e1712);
  --bg-2:       light-dark(#ebe1cd, #271e18);
  --ink:        light-dark(#22252e, #f4ecdc);
  --grey:       light-dark(#5d5a55, #b8ab98);
  --rule:       light-dark(rgb(34 37 46 / 0.18), rgb(244 236 220 / 0.16));
  --deep:       light-dark(#5b4232, #b48c6c);
  --accent:     light-dark(#c42b3c, #e4505f);
  --accent-ink: light-dark(#ad2434, #ee6f7b);
  --select:     light-dark(#e3cfc0, #4a3426);
}

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* measure and rhythm */
:root {
  --text: 1.1875rem;          /* 19px body */
  --small: 0.9375rem;
  --measure: 36rem;           /* about 66 characters of Newsreader at 19px */
  --note: 13rem;
  --note-gap: 2.5rem;
  --gutter: 2rem;
  --line: 1px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-hover: 180ms;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}
@media (max-width: 30rem) { :root { --gutter: 1rem; --text: 1.125rem; } }

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@view-transition { navigation: auto; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule) var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--text);
  font-optical-sizing: auto;
  line-height: 1.55;
  padding: 1.5rem var(--gutter) 4rem;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
::selection { background: var(--select); color: var(--ink); }

/* one frame for header and page, centered: the measure on the contents page;
   on a post, wide screens add the margin the sidenotes hang in. */
.frame { max-width: var(--measure); margin-inline: auto; }
@media (min-width: 60rem) {
  .post .frame { max-width: calc(var(--measure) + var(--note-gap) + var(--note)); }
}

/* links: a hairline in the second hue at rest, a solid accent line grown over it */
a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--deep), var(--deep));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0% var(--line), 100% var(--line);
  transition: background-size var(--t-hover) var(--ease);
}
a:hover, a:focus-visible { background-size: 100% var(--line), 100% var(--line); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* the header: a name that goes home and a word that goes home. nothing else. */
.top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: var(--small); margin-bottom: 4rem;
  view-transition-name: top;
}
.top a { background-size: 0% var(--line), 0% var(--line); }
.top a:hover, .top a:focus-visible { background-size: 100% var(--line), 0% var(--line); }
.top .name { font-weight: 500; }
.top .home { color: var(--grey); }
.top .home:hover, .top .home:focus-visible { color: var(--ink); }

main { max-width: var(--measure); min-width: 0; }
main > * { margin: 0; }
main > * + * { margin-top: 1.1em; }
h1, h2 { font-weight: 500; margin: 0; text-wrap: balance; }
h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
.grey { color: var(--grey); }

/* the contents page: a book's contents. title at reading size, a dotted
   leader out to the date, a grey line about the post underneath. */
.lede { color: var(--grey); }
.empty { color: var(--grey); font-style: italic; }
.contents { list-style: none; padding: 0; margin-top: 2.5rem; display: grid; gap: 1.75rem; }
.contents:not(:has(li)) { display: none; }
.contents li {
  display: grid; grid-template-columns: minmax(0, max-content) minmax(1.5rem, 1fr) auto;
  column-gap: 0.6rem; row-gap: 0.2rem; align-items: baseline;
}
.contents li::after {
  content: ""; grid-column: 2; grid-row: 1; align-self: end; height: 0;
  margin-bottom: 0.4em; border-bottom: 1px dotted var(--grey); opacity: 0.6;
}
.contents .title { grid-column: 1; grid-row: 1; font-size: 1.25rem; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.contents .title a { background-size: 0% var(--line), 0% var(--line); }
.contents .title a:hover, .contents .title a:focus-visible { background-size: 100% var(--line), 0% var(--line); }
.contents .date { grid-column: 3; grid-row: 1; color: var(--grey); font-size: var(--small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.contents .draft .date { color: var(--accent-ink); font-style: italic; }
.contents .dek { grid-column: 1 / -1; color: var(--grey); font-size: 1rem; max-width: 30rem; }
/* the empty line says only what is true: it shows until something is published */
main:has(.contents li:not(.draft)) .empty { display: none; }

/* the post */
article { min-width: 0; line-height: 1.6; }
article > * { margin: 0; }
article > * + * { margin-top: 1.1em; }
article p { hanging-punctuation: first; }
.draft-note {
  font-size: var(--small); line-height: 1.5; color: var(--grey);
  padding: 0.6rem 0.9rem; border: 1px dashed var(--accent-ink); border-radius: 2px;
  margin-bottom: 2.5rem;
}
.draft-note strong { color: var(--accent-ink); font-weight: 600; font-style: italic; }
article h1 { view-transition-name: post-title; }
.meta { color: var(--grey); font-size: var(--small); font-variant-numeric: tabular-nums; }
article .meta { margin-top: 0.4rem; margin-bottom: 2.25rem; }
article h2 { font-size: 1.3125rem; line-height: 1.3; margin-top: 2.2em; }
article h2 + * { margin-top: 0.5em; }
.tk { color: var(--grey); font-style: italic; }

article code { font-family: var(--mono); font-size: 0.82em; }
article pre {
  margin-block: 1.75em; padding: 0.9rem 1rem;
  background: var(--bg-2); border-left: 2px solid var(--deep);
  overflow-x: auto; font-size: 0.8125rem; line-height: 1.6; tab-size: 2;
}
article pre code { font-size: inherit; }
article pre .c { color: var(--grey); }

article figure { margin-block: 2.25em; display: grid; gap: 0.7rem; }
article figcaption { color: var(--grey); font-size: var(--small); line-height: 1.5; }
.fold svg { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); }
.fold path, .fold circle { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.fold .apart { stroke: var(--deep); }
.fold .seat { fill: var(--bg); }
.fold .done { fill: var(--accent); stroke: none; }
.fold text { fill: var(--grey); font-family: var(--serif); font-size: 13px; font-style: italic; }

/* the sidenote: a marker in the line, the note beside it when there is a
   margin, under its line when there is not. no script. */
.fn { font-size: 0.72em; line-height: 0; vertical-align: 0.5em; font-variant-numeric: tabular-nums; padding-inline: 0.1em; }
.fn a { background-size: 0% var(--line), 100% var(--line); }
.note {
  display: block; margin: 0.75rem 0 0.25rem; padding-left: 0.85rem;
  border-left: 1px solid var(--rule); color: var(--grey);
  font-size: 0.9375rem; line-height: 1.45;
}
.note .n { color: var(--ink); margin-right: 0.35em; font-variant-numeric: tabular-nums; }
.note:target { border-left-color: var(--accent); }
@media (min-width: 60rem) {
  .note {
    float: right; clear: right; width: var(--note);
    margin: 0.25rem calc(-1 * (var(--note) + var(--note-gap))) 0 0;
    padding-left: 0.75rem;
  }
}

.more { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--grey); font-size: var(--small); }
.endmark { display: block; width: 26px; height: 26px; color: var(--ink); margin-top: 1.5rem; }
.endmark path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.endmark .i { stroke-width: 3.2; }
.endmark .s { stroke: var(--grey); stroke-width: 1.3; }
.endmark .d { fill: var(--accent); }

::view-transition-old(top), ::view-transition-new(top) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}