/* ───────────────────────────────────────────────────────────────────────────
   the library — one stylesheet for the whole site
   black ink on warm cream, like a page from an endless book
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --paper:      #ffffff;   /* full white */
  --paper-deep: #f1efe9;   /* a touch deeper */
  --ink:        #1c1a16;   /* not quite black */
  --ink-soft:   #4a463c;   /* faded ink, for quiet text */
  --link:       #8a78b5;   /* the doorways: a shade of purple */
  --mark:       rgba(60, 48, 24, 0.13);  /* used only on content pages */
  --mark-hover: rgba(60, 48, 24, 0.26);
  --serif: "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, "Times New Roman", serif;
  /* the shifting field is monospace so every word holds a fixed width and the
     page never reflows as the letters change. Courier Prime reads like a
     typed manuscript rather than a terminal. */
  --mono: "Courier Prime", "Cutive Mono", "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--mark-hover); }

/* ── the homepage: a screen full of shifting words ───────────────────────── */

body.library { overflow: hidden; }

#field {
  position: fixed;
  inset: 0;
  padding: 2vmin 2.4vmin;
  font-family: var(--mono);
  text-align: justify;
  text-align-last: justify; /* fill the final line to the edge too */
  text-justify: inter-word;
  hyphens: none;
  font-size: clamp(0.6rem, 0.95vw, 0.86rem);
  line-height: 1.3;
  letter-spacing: 0;
  word-spacing: 0.04em;
  overflow: hidden;
}

/* the doorways — the destination word itself, in a different colour and made
   to read bolder. the weight is FAKED with a small text-shadow rather than
   font-weight: it's paint-only, so the glyph advance is unchanged
   and swapping a doorway in/out never re-justifies the line (the old nudge). */
a.doorway {
  color: var(--link);
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0.04em 0 0 currentColor;
  -webkit-text-stroke: 0.12px currentColor;
}
a.doorway:hover,
a.doorway:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* ── content pages: a quiet single column, a page from the same book ─────── */

main.page {
  max-width: 38rem;
  margin: 0 auto;
  padding: 14vmin 7vw 18vmin;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.85;
}

main.page h1 {
  font-weight: 400;
  font-size: 1.05em;
  letter-spacing: 0.32em;
  text-transform: lowercase;
  color: var(--ink-soft);
  margin: 0 0 3.5em;
}

main.page h2 {
  font-weight: 600;
  font-size: 1em;
  letter-spacing: 0.04em;
  margin: 2.6em 0 0.4em;
}

main.page p { margin: 0 0 1.4em; }

main.page a {
  color: var(--ink);
  text-decoration: none;
  background: var(--mark);
  box-shadow: 0 0 0 0.1em var(--mark);
  border-radius: 0.08em;
  transition: background 300ms ease, box-shadow 300ms ease;
}
main.page a:hover,
main.page a:focus-visible {
  background: var(--mark-hover);
  box-shadow: 0 0 0 0.1em var(--mark-hover);
  outline: none;
}

/* the way back to the shifting page */
a.return {
  display: inline-block;
  margin-bottom: 5em;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: lowercase;
  color: var(--ink-soft);
  background: none !important;
  box-shadow: none !important;
}
a.return:hover { color: var(--ink); }

/* a plain list of links (writings, photos hub, …) */
ul.index {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.index li { margin: 0 0 0.9em; }

/* media (film embeds, gallery images) sit calmly on the cream */
.media {
  margin: 0 0 3.5em;
}
.media iframe,
.media img {
  display: block;
  max-width: 100%;
  border: none;
}
.media iframe { aspect-ratio: 16 / 9; height: auto; width: 100%; }
.media .caption {
  color: var(--ink-soft);
  font-size: 0.92em;
  margin-top: 0.6em;
}

.poem {
  white-space: pre-line;
  line-height: 1.9;
}

/* ── subpages, new theme: a single block of text centred on the page ─────── */

body.middle {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9vmin 7vw;
}

.block {
  max-width: 54ch;
  font-family: var(--mono);
  font-size: clamp(0.68rem, 0.92vw, 0.82rem);
  line-height: 1.75;
  text-align: justify;        /* a rectangular block, like the home page */
  text-justify: inter-word;
  hyphens: none;
}
.block.left   { text-align: left; }
.block.center { text-align: center; }
.block p { margin: 0 0 1.4em; }
.block p:last-child { margin-bottom: 0; }

/* faint lowercase labels (prose / poetry / etc.) */
.block .label {
  color: var(--ink-soft);
  letter-spacing: 0.18em;
  text-transform: lowercase;
}

/* links keep the home page's doorway colour */
.block a {
  color: var(--link);
  text-decoration: none;
}
.block a:hover,
.block a:focus-visible {
  text-decoration: underline;
  outline: none;
}

.block .poem { margin: 0; }

/* a taller column for pages that scroll (film) */
.column {
  max-width: 42rem;
  margin: 0 auto;
  padding: 13vmin 7vw 16vmin;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.92vw, 0.84rem);
  line-height: 1.7;
}
.column .label {
  color: var(--ink-soft);
  letter-spacing: 0.16em;
  text-transform: lowercase;
  margin: 0 0 0.7em;
}
.column .media { margin: 0 0 4.5em; }
.column .media:last-child { margin-bottom: 0; }
.column .media iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }
.column .media .caption { color: var(--ink-soft); margin-top: 0.8em; }
.column .media .caption a { color: var(--link); text-decoration: none; }
.column .media .caption a:hover { text-decoration: underline; }

/* ── the photographs: an overwhelming wall (the aleph) ──────────────────── */
body.aleph { background: var(--paper); }
.wall {
  column-width: 150px;     /* many small columns → a dense mosaic */
  column-gap: 3px;
  padding: 3px;
}
.wall img {
  width: 100%;
  display: block;
  margin: 0 0 3px;
  break-inside: avoid;
  cursor: pointer;
  transition: opacity 200ms ease;
}
.wall img:hover { opacity: 0.72; }

/* the lightbox */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  cursor: zoom-out;
  z-index: 10;
}
#lightbox.open { display: flex; }
#lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* a faint way back to the shifting page */
a.back {
  position: fixed;
  top: 2.6vmin;
  left: 2.8vmin;
  z-index: 20;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.8); /* stays legible over the photo wall */
  padding: 0.25em 0.55em;
}
a.back:hover { color: var(--ink); }