/* because club */

/* Inks. Each one sets the ink and the paper it prints on.
   <html data-ink="green"> picks one. The dots in the footer carry the same
   attribute, so each dot shows its own ink. */
:root, [data-ink="purple"] {
  --ink: #472d96;
  --paper: #f8f6fb;
  --panel: #ece8f4;
  --text: #1f1b2a;
  --key: #472d96;
  --name: #1f4c9a;
  --num: #b02848;
  --str: #1d6a55;
  --com: #625b78;
}
[data-ink="green"] { --ink: #1d6a55; --paper: #f3f9f6; --panel: #e0eee9; --text: #0e221c; --com: #44695c; }
[data-ink="red"]   { --ink: #b02848; --paper: #fcf5f6; --panel: #f5e6e7; --text: #2a181a; --com: #785559; }
[data-ink="blue"]  { --ink: #1f4c9a; --paper: #f4f7fc; --panel: #e4ebf6; --text: #161e2c; --com: #51617b; }
[data-ink="black"] { --ink: #000; --paper: #fff; --panel: #f0f0f0; --text: #000; --key: #000; --name: #000; --num: #000; --str: #000; --com: #666; }

/* Dark mode: the same inks, printed light on dark paper. Follows the system
   setting; every ink has its own dark palette. */
@media (prefers-color-scheme: dark) {
  :root, [data-ink="purple"] {
    --ink: #b9a6ec;
    --paper: #16121f;
    --panel: #241d33;
    --text: #e6e1f0;
    --key: #b9a6ec;
    --name: #8fb0ee;
    --num: #f08aa0;
    --str: #7fd0b5;
    --com: #9a93ad;
  }
  [data-ink="green"] { --ink: #7fd0b5; --paper: #0f1a16; --panel: #1a2a24; --text: #dfeee8; --com: #8fb0a4; }
  [data-ink="red"]   { --ink: #f08aa0; --paper: #1e1215; --panel: #2e1c21; --text: #f1e3e6; --com: #b08f95; }
  [data-ink="blue"]  { --ink: #8fb0ee; --paper: #10161f; --panel: #1b2433; --text: #e0e6f0; --com: #96a3b8; }
  [data-ink="black"] { --ink: #fff; --paper: #000; --panel: #1a1a1a; --text: #fff; --key: #fff; --name: #fff; --num: #fff; --str: #fff; --com: #999; }
}

/* Page */
html { background: var(--paper); color-scheme: light dark; }
body {
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 24px 56px;
  color: var(--text);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(18px, 4.6vw, 20px);
  line-height: 1.6;
}
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible, button:focus-visible, pre:focus-visible { outline: 2px dashed currentColor; outline-offset: 4px; }
input:focus-visible { outline: 0; border-bottom-width: 3px; }
textarea:focus-visible { outline: 0; }
img { display: block; width: 100%; height: auto; }
p { margin: 1em 0 0; }
h2 { margin: 0 0 0.55em; color: var(--ink); font: 900 38px/1.05 "Londrina Solid", "Arial Narrow", sans-serif; }

/* Masthead */
.masthead { padding-bottom: 14px; border-bottom: 4px double var(--ink); color: var(--ink); }
.issue { margin: 0; text-align: right; }
.issue span { display: inline-block; padding: 0 0.45em; border: 2px solid; border-radius: 50% 46% 52% 48% / 58% 46% 54% 44%; transform: rotate(-3deg); }
.logo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px min(22px, 2.5vw); margin-top: 2px; text-decoration: none; }
.logo h1 { margin: 0; font: 400 min(120px, 15vw)/1 "Londrina Shadow", "Arial Narrow", sans-serif; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .logo h1 { font-family: "Londrina Solid", "Arial Narrow", sans-serif; font-weight: 900; } }

/* The because sign: three hand-inked dots */
.because { display: flex; flex-direction: column; align-items: center; gap: 0.07em; font-size: min(120px, 15vw); }
.because span { display: flex; gap: 0.09em; }
.because i { display: block; width: 0.17em; height: 0.17em; background: currentColor; border-radius: 50% 50% 54% 46% / 46% 52% 48% 54%; }
.because span i:first-child { height: 0.165em; border-radius: 47% 53% 50% 50% / 52% 48% 53% 47%; }
.because span i:last-child { width: 0.165em; border-radius: 52% 48% 46% 54% / 49% 53% 47% 51%; }

/* Titles, bylines, figures */
main { margin-top: 36px; }
.title { margin: 0; font-size: 68px; }
.title a { text-decoration: none; }
.title a:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.byline { margin-top: 6px; }
.lede { margin-top: 1.2em; }
figure { margin: 1.5em 0 0; padding: 10px; border: 2px solid var(--ink); border-radius: 10px; }
figure img { border-radius: 4px; }
figure a { display: block; }
figcaption { margin-top: 0.6em; color: var(--ink); font-size: 0.8em; line-height: 1.5; text-align: center; text-wrap: pretty; }

/* Home: the current issue, then the back issues */
.preview figure { margin-top: 1.2em; }
.preview figure + p { margin-top: 0.9em; }
.more { display: flex; flex-wrap: wrap; gap: 0 1.5em; margin-top: 0.4em; }
.more a { padding: 10px 0; }
.back-issues, .comments { margin-top: 2em; padding-top: 1.8em; border-top: 2px solid var(--ink); }
.back-issues ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); justify-content: center; gap: 1.8em 24px; margin: 0; padding: 0; list-style: none; text-align: center; }
.back-issues li { min-width: 0; }
.back-issues li > a { display: block; position: relative; }
.back-issues .number { position: absolute; top: 8px; right: 8px; padding: 0 0.45em; border: 2px solid var(--ink); border-radius: 50% 46% 52% 48% / 58% 46% 54% 44%; background: var(--paper); color: var(--ink); font-size: 0.85em; line-height: 1.5; transform: rotate(-3deg); }
.back-issues p { margin-top: 0.45em; }
.back-issues p a { padding: 6px 0; }

/* Article */
.strip > div { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.strip > div > div { flex: 1 1 130px; min-width: 0; }
.strip span { display: block; margin-top: 4px; text-align: center; font-size: 0.9em; }
.strip figcaption { margin-top: 0.8em; }
.strip + p { margin-top: 1.5em; }
code, pre { font-family: "Courier Prime", "Courier New", monospace; }
code { font-size: 0.95em; line-height: 1; }
pre { margin: 1em 0 0; padding: 0.9em 1.1em; overflow-x: auto; background: var(--panel); color: var(--text); font-size: 0.85em; line-height: 1.5; }
pre code { font-size: inherit; line-height: inherit; }
.k { color: var(--key); }
.n { color: var(--name); }
.m { color: var(--num); }
.s { color: var(--str); }
.c { color: var(--com); }
.details { margin: 1.4em 0 0; }
.details div { display: flex; }
.details dt { flex: 0 0 8.5em; overflow: hidden; white-space: nowrap; }
.details dt::after { content: " .............................."; }
.details dt::after { content: " .............................." / ""; } /* same dots, hidden from screen readers */
.details dd { margin: 0; padding-left: 0.4em; }

/* Comments */
.comments { margin-top: 2.4em; }
.comment + .comment { margin-top: 1.1em; }
.comment p { margin: 0; }
.comment .by { text-align: right; }
.reply p:first-child { margin-left: 2em; }
.pending { opacity: 0.7; }
.pending .by em { font-style: italic; }
.closed { margin-top: 1.5em; font-style: italic; color: var(--ink); }

/* Moderation */
.admin .title { margin-bottom: 1.25em; }
.admin .comment { margin-top: 1.5em; padding: 0.9em 1.1em 1.1em; border: 2px dashed var(--ink); }
.admin .on { margin-bottom: 0.5em; color: var(--ink); }
form .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
form .error { margin: 0 0 0.5em; font-style: italic; }
form .thanks { margin: 0; }
.fields button { margin: 0 0 0 auto; align-self: flex-end; }
form { margin-top: 2em; padding: 0.9em 1.1em 1.1em; border: 2px dashed; color: var(--ink); }
.fields { display: flex; flex-wrap: wrap; gap: 0 1.5em; }
.fields div { flex: 1 1 220px; min-width: 0; display: flex; align-items: baseline; gap: 0.5em; }
input, textarea, form button { box-sizing: border-box; margin: 0; border-radius: 0; background-color: transparent; color: inherit; font-family: inherit; font-size: inherit; }
input, textarea { color: var(--text); }
input { flex: 1; min-width: 0; height: 44px; padding: 10px 0 0; border: 0; border-bottom: 2px solid var(--ink); }
form > label { display: block; margin-top: 0.7em; }
textarea {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  line-height: 1.6em;
  resize: vertical;
  /* ruled lines */
  background-image: linear-gradient(transparent calc(100% - 2px), var(--ink) calc(100% - 2px));
  background-size: 100% 1.6em;
  background-attachment: local;
}
form button { display: block; min-height: 46px; margin: 1em 0 0 auto; padding: 4px 1.1em; border: 2px solid; line-height: 1.4; cursor: pointer; }
form button:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.admin form.actions { display: flex; gap: 1em; justify-content: flex-end; margin: 0; padding: 0; border: 0; }
.admin form.actions button { margin: 0.6em 0 0; }

/* About */
.about p { text-wrap: pretty; }
.about .title + p { margin-top: 0.8em; }

/* Footer */
footer { margin-top: 3em; border-top: 2px solid var(--ink); color: var(--ink); text-align: center; }
footer nav { margin-top: 0.8em; padding: 10px 0; }
.folio { margin-top: 0.3em; }

/* The ink dots */
.inks { display: flex; justify-content: center; margin-top: 0.5em; }
.inks button { width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.inks button::before { content: ""; display: block; width: 14px; height: 14px; margin: 0 auto; background: currentColor; }
.inks button:hover::before { transform: scale(1.25); }
.inks button:focus-visible { outline-offset: -3px; }
.inks [aria-pressed="true"]::before { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px currentColor; }
/* each dot is a slightly different blob, like the ones in the logo */
.inks button:nth-child(1)::before { border-radius: 47% 53% 50% 50% / 52% 48% 53% 47%; }
.inks button:nth-child(2)::before { border-radius: 52% 48% 46% 54% / 49% 53% 47% 51%; }
.inks button:nth-child(3)::before { border-radius: 50% 50% 54% 46% / 46% 52% 48% 54%; }
.inks button:nth-child(4)::before { border-radius: 53% 47% 49% 51% / 48% 54% 46% 52%; }
.inks button:nth-child(5)::before { border-radius: 49% 51% 52% 48% / 51% 47% 53% 49%; }

/* Print: ink on paper, nothing to click */
@media print {
  :root, [data-ink] { --ink: #000; --paper: #fff; --panel: #f2f2f2; --text: #000; --key: #000; --name: #000; --num: #000; --str: #000; --com: #555; }
  html { background: #fff; }
  body { max-width: none; padding: 0; font-size: 11pt; line-height: 1.5; }
  footer, .inks, #new-comment, .closed, .more, .trap { display: none; }
  .logo h1 { font-family: "Londrina Solid", "Arial Narrow", sans-serif; font-weight: 900; font-size: 60pt; }
  .because { font-size: 60pt; }
  .title { font-size: 32pt; }
  a { color: inherit; text-decoration: none; }
  article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  figure, pre, .comment, .back-issues li { break-inside: avoid; }
  figure { border-color: #000; }
  figure img { max-height: 60vh; width: auto; max-width: 100%; margin: 0 auto; }
  pre { white-space: pre-wrap; word-wrap: break-word; border: 1px solid #ccc; background: none; }
  .back-issues .number { background: #fff; }
  .back-issues ol { gap: 1em 16px; }
  .comments { page-break-before: auto; }
  .pending { opacity: 1; }
}