/* henrikmauler.net — the reading room. Own design; shares nothing with other sites.
   One quiet monospace face, reading size throughout. To try another face, change --font. */

@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #f2f2f5;
  --ink: #1b1915;
  --ink-2: #67676d;
  --light: #efe9de;
  --bedrock: #17121e;
  --font: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gut: max(16px, calc((100% - 58rem) / 2));
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px;
    text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); }
a:hover, a:focus-visible { text-decoration-color: currentColor; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
h1, h2, h3 { font-weight: 500; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 16px; top: 16px; background: var(--ink); color: var(--paper); padding: .3rem .6rem; z-index: 9; }

.label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.label a { text-decoration: none; }

/* ---------- header: the person ---------- */
.top { padding: clamp(32px, 7vw, 88px) var(--gut) clamp(28px, 4vw, 48px); }
.top h1 { font-size: 1.2rem; line-height: 1.3; letter-spacing: .01em; margin: .9rem 0 1.6rem; }
.bio { max-width: 62ch; }
.bio p { margin: 0 0 1em; }
.bio .fields { color: var(--ink-2); font-style: italic; font-size: .93rem; }

/* the record sits on a soft, pale orange field */
.record { margin: 2rem 0 0; display: grid; gap: .6rem; max-width: 72ch; font-size: .93rem;
          padding: 1.2rem 1.3rem 1.3rem; background: #FCEBDD; }
.record div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: start; }
.record dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #5a534a; padding-top: .15rem; }
.record dd { margin: 0; color: var(--ink); }

/* ---------- the core sample ---------- */
.core-head { padding: clamp(1.8rem, 4vw, 3rem) var(--gut) 1.6rem; display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; align-items: baseline; }
.core-head h2 { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.core-head p { margin: 0; color: var(--ink-2); font-size: .93rem; }

.core { list-style: none; margin: 0 auto; padding: 0 var(--gut) 0; }

/* each year is a card in a stack: square edges, a small rectangular cutout (two characters wide) in both top corners shows the card above tucking underneath; empty years fold into thin edges */
.card {
  --r: 12px; --w: 2ch;
  position: relative; color: #141414;
  margin-top: calc(var(--r) * -1);
  padding: calc(1.15rem + var(--r)) 1.25rem calc(1.35rem + var(--r));
  display: grid; grid-template-columns: 1fr auto; gap: .4rem 1.5rem;
  filter: drop-shadow(0 -2px 6px rgb(0 0 0 / .28));  /* the shadow follows the whole outline, cutouts included */
}
/* the card face carries the colour and the cutout shape; kept on a layer behind the text so the shadow is not clipped away */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg);
  clip-path: polygon(var(--w) 0, calc(100% - var(--w)) 0, calc(100% - var(--w)) var(--r), 100% var(--r), 100% 100%, 0 100%, 0 var(--r), var(--w) var(--r));
}
.card:first-child { margin-top: 0; }
.card:last-child { padding-bottom: 1.6rem; }
.card.light { color: #fff; }
.card.light .src, .card.light .q { opacity: .82; }
.card.strip { padding-top: calc(.55rem + var(--r)); padding-bottom: calc(.55rem + var(--r)); }
.card.strip:last-child { padding-bottom: .6rem; }

.field { grid-column: 2; grid-row: 1; margin: 0; text-align: right; font-weight: 400; line-height: 1.15; }
.fl { display: block; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; opacity: .85; }
.y { display: block; font-size: 1.3rem; letter-spacing: .02em; }
.strip .field { display: flex; gap: .7rem; align-items: baseline; justify-content: flex-end; }
.strip .y { font-size: .78rem; opacity: .85; }
.strip .fl { opacity: .6; }
.items { grid-column: 1; grid-row: 1; min-width: 0; padding-top: .15rem; }

.c-night .y, .c-night .mark, .c-char .y, .c-sky .fl { color: var(--accent); }
.card.c-rose, .c-rose .y, .c-rose .fl, .c-rose .mark, .c-rose .src, .c-rose a { color: var(--accent); }  /* 1986: purple type on rose */

.items ul { list-style: none; margin: 0; padding: 0; }
.entry + .entry { margin-top: 1.05rem; }
.mark + ul { margin-top: 1.05rem; }
.items ul + .mark { margin-top: 1.05rem; }
.mark + .mark { margin-top: .35rem; }
.entry a { text-decoration: none; }
.entry .t {
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.entry a:hover .t, .entry a:focus-visible .t { text-decoration-color: currentColor; }
.entry a::after { content: " ↗"; font-size: .8em; opacity: .55; }
.entry .src a { text-decoration-line: underline; }  /* names linked in the line under a title: plain underline, no arrow */
.entry .src a::after { content: none; }
.src { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; margin: .15rem 0 0;
       font-size: .74rem; opacity: .72; }
.src > span:last-child { text-wrap: pretty; }  /* no single word alone on the last line */
.kind { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.kind::after { content: " /"; opacity: .6; }
.q { font-style: italic; font-size: .93rem; margin: .35rem 0 0; max-width: 72ch; opacity: .85; text-wrap: pretty; }  /* 72ch: a quote of one sentence stays on one line; pretty: no single word alone on the last line */
.mark { margin: 0; font-style: italic; }

/* ---------- footer: bedrock ---------- */
.foot { color: var(--ink); font-size: .8rem;
        padding: 2.6rem var(--gut) 3rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.foot p { margin: 0; }
.top .work { margin: .9rem 0 0; color: var(--ink-2); font-size: .93rem; }  /* sits just under the record box */

/* ---------- depth gauge ---------- */
.depth { position: fixed; right: 14px; bottom: 12px; margin: 0; font-size: .62rem; letter-spacing: .14em;
         text-transform: uppercase; color: #0b0b0b; background: #64F0EE; border-radius: 999px; padding: .35rem .8rem .3rem;
         box-shadow: 0 2px 10px rgb(0 0 0 / .18);
         opacity: 0; transition: opacity .3s; pointer-events: none; }
.depth.on { opacity: 1; }
.depth-y { font-size: .82rem; letter-spacing: .04em; margin-left: .3rem; }

/* ---------- legal ---------- */
.top.small h1 { margin-bottom: 0; }
.legal { padding: 0 var(--gut) 4rem; max-width: calc(66ch + 2 * var(--gut)); font-size: .93rem; }
.legal h2 { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin: 2.6rem 0 .8rem;
            padding-top: .9rem; border-top: 1px solid rgb(27 25 21 / .16); }
.legal h2:first-child { margin-top: .5rem; }
.legal h3 { font-size: .93rem; margin: 1.4rem 0 .2rem; }
.legal p { margin: 0 0 .8em; }

@media (max-width: 640px) {
  body { font-size: 14px; }
  .core { padding: 0 10px; }
  .card { padding-left: 1rem; padding-right: 1rem; gap: .3rem 1rem; }
  .y { font-size: 1.05rem; }
  .record div { grid-template-columns: 1fr; gap: 0; }
  .depth { right: 10px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .depth { transition: none; } }

.entry .t.plain { text-decoration: none; }

/* ---------- the Wallet fold ----------
   Without JavaScript every card stays open. With it (html.js), years outside the keystones fold to their edge:
   the first line of the card and how many more lie under it. A tap pulls the card out; the year folds it back. */
.tog { all: unset; display: block; cursor: pointer; text-align: right; }
.tog:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.head { display: none; }
.js .card.fold { padding-top: calc(.6rem + var(--r)); padding-bottom: calc(.6rem + var(--r)); cursor: pointer;
                 transition: transform .18s ease; }
.js .card.fold:last-child { padding-bottom: .7rem; }
.js .card.fold:hover { transform: translateY(-3px); }
.js .card.fold .items { display: none; }
.js .card.fold .head { display: flex; gap: .6rem; align-items: baseline; grid-column: 1; grid-row: 1; min-width: 0; margin: 0;
                       font-size: .93rem; line-height: 1.3; }
.js .card.fold .ht { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.js .card.fold .more { flex: none; font-size: .7rem; letter-spacing: .08em; opacity: .6; }
.js .card.fold .field { align-self: center; }
.js .card.fold .tog { display: flex; gap: .7rem; align-items: baseline; justify-content: flex-end; }
.js .card.fold .y { font-size: .95rem; }
.js .card.fold .fl { opacity: .6; }
.card.pull .items { animation: pull .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes pull { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.today { margin: 0 0 .9rem; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; font-style: normal; }
.all { all: unset; cursor: pointer; margin-left: auto; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
       color: var(--ink-2); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.all:hover, .all:focus-visible { color: var(--ink); }
.all[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .js .card.fold { transition: none; } .js .card.fold:hover { transform: none; } .card.pull .items { animation: none; } }
@media (max-width: 640px) { .js .card.fold .fl { display: none; } }   /* more room for the edge line on phones */

/* ---------- the empty 2027 card on top: a pass not added yet ---------- */
.card.ghost { background: transparent; color: var(--ink); filter: none; clip-path: none;
              outline: 1.5px dashed color-mix(in srgb, var(--ink) 45%, transparent); outline-offset: -1.5px; }
.card.ghost .y, .card.ghost .fl { color: var(--ink-2); }
.card.ghost .mark { color: var(--ink-2); }
.card.ghost .add { margin: .5rem 0 0; font-size: .93rem; }
.card.ghost .mailme { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.card.ghost .mailme::after { content: " →"; opacity: .6; }
.card.ghost .addr { color: var(--ink-2); font-size: .8rem; margin-left: .4rem; }
.js .card.ghost .addr { display: none; }

/* under the name: the art-world line (born, city; lives and works) */
.top h1:has(+ .born) { margin-bottom: .35rem; }
.born { margin: 0 0 1.6rem; font-size: .8rem; letter-spacing: .02em; color: var(--ink-2); }

/* ---------- text pages written as code (site-src/textpage.py): The Monastic Pixel Pusher ---------- */
.textpage { --k-cm: #67676d; --k-turq: #0B7489; --k-purple: #7A00FF; --k-orange: #C8410B; --k-blue: #1F5FD6; }
.tmeta { margin: .9rem 0 0; max-width: 62ch; font-size: .8rem; color: var(--ink-2); }
.tmeta a { color: inherit; }
.codex { margin: 0; padding: .5rem var(--gut) 4rem; font: inherit; font-size: .93rem; line-height: 1.7;
         white-space: normal; overflow-wrap: break-word; }
.codex code { font: inherit; display: block; max-width: 80ch; }
.codex .ln { display: block; white-space: pre-wrap; padding-left: 3ch; text-indent: -3ch; }
.codex .rule { white-space: pre; overflow: hidden; text-overflow: clip; padding-left: 0; text-indent: 0; }
.codex .gap { display: block; height: 1.1em; }
.codex .mk { color: var(--k-cm); }
.codex .hdr .ln { color: var(--k-turq); }
.codex .key { color: var(--k-cm); letter-spacing: .12em; }
.codex .hdr .key { color: var(--k-turq); }
.codex .chap { display: block; margin-top: 1.4rem; }
.codex .h { font-weight: 500; }
.codex .badge { padding: .05em .45ch; font-weight: 500; }
.codex .ht { letter-spacing: .04em; }
.codex .code { color: var(--ink); padding: .25rem 0 .25rem 3ch; }
.codex .pp, .codex .ty { color: var(--k-blue); }
.codex .inc, .codex .num, .codex .str { color: var(--k-turq); }
.codex .fn { color: var(--k-orange); }
.codex .k { color: var(--k-purple); }
.codex .op { color: var(--k-cm); }
.codex .cm { color: var(--k-cm); font-style: italic; }
/* the commentary: flowing paragraphs, a star in the gutter on every line (like a block comment) */
.codex .para { display: block; position: relative; padding-left: 3ch; hyphens: auto; -webkit-hyphens: auto; }
.codex .para::before { content: " *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *\A  *";
                       position: absolute; left: 0; top: 0; bottom: 0; width: 3ch; overflow: hidden; white-space: pre; color: var(--k-cm); }
.lswitch { margin: .9rem 0 0; font-size: .72rem; letter-spacing: .16em; color: var(--ink-2); }
.lswitch [aria-current] { color: var(--ink); font-weight: 500; }

/* text pages: the object beside the text (Shell of the Ghost on top, the printed book at the end) */
.tfig { margin: 0 var(--gut) 2.2rem; max-width: 26rem; }
.tfig img { display: block; width: 100%; height: auto; }
.tfig img + img { margin-top: 6px; }   /* a close-up stacked under the picture */
.tfig figcaption { margin-top: .6rem; font-size: .78rem; line-height: 1.55; color: var(--ink-2); }
.codex + .tfig { margin-top: -1.5rem; }