/* cfeess.com
   one stylesheet for every page.
   layout: fixed name + tree menu on the left, one outlined content column on the right.
   below 960px everything stacks into one column. */

:root {
  --ink: #000;
  --quiet: #666;
  --paper: #fff;
  /* exactly your original font stack. the "serif" at the end matters:
     it stops browsers from shrinking monospace text to 13px */
  --mono: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-text-size-adjust: 100%;  /* stops phones from enlarging some text blocks on their own */
}

a { color: var(--ink); text-decoration: none; }
a:hover, a:focus-visible { font-weight: bold; }
p a, .links a, .facts a, .jump a { text-decoration: underline; }

img, video { display: block; width: 100%; height: auto; }
audio { width: 100%; }

/* ---------- fern header behind the name ---------- */

.fern {
  position: fixed;
  top: -350px;
  left: 9vw;
  width: 180px;
  z-index: -1;
}

/* ---------- page layout ---------- */

.wrap {
  display: flex;
  gap: 24px;
  margin: 80px 20px 40px 10vw;
}

.side {
  flex: 0 0 250px;
  position: sticky;
  top: 80px;
  align-self: flex-start;
}

.name { display: block; font-size: 24px; }
.role { margin: 4px 0 28px; font-size: 12px; color: var(--quiet); }

/* ---------- menu ----------
   on desktop the menu is laid out as typed (white-space: pre), tree characters and all.
   on phones the tree is hidden (see small screens). */

.menu { white-space: pre; }
.menu .top { text-transform: uppercase; }
.menu .cat { color: var(--quiet); }
.menu [aria-current="page"] { font-weight: bold; }

.content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 750px;
  outline: 1px solid var(--ink);
  padding: 10px;
}

/* ---------- building blocks ---------- */

.box { outline: 1px solid var(--ink); padding: 10px; }

.head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 22px;
}
.head small { display: block; margin-top: 3pt; font-size: 11pt; }
.head .date { font-size: 11pt; white-space: nowrap; }

.media { margin: 20px -10px 10px; }
.media figcaption { padding: 4px 10px 0; font-style: italic; text-align: right; }

/* videos and images keep their space while loading, so the page doesn't jump */
.media video { aspect-ratio: 16 / 9; background: #111; }

.entry { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--ink); }

.meta, .facts { display: grid; gap: 2px 10px; margin: 10px 0; }
.meta { grid-template-columns: 7ch 1fr; font-size: 12px; }
.facts { grid-template-columns: 11ch 1fr; row-gap: 8px; }
.meta dt, .facts dt { color: var(--quiet); }
.meta dd, .facts dd { margin: 0; }

.links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.jump { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }

/* ---------- filter on selected works (no javascript) ----------
   a link like #games makes <span id="games"> the :target.
   then every group except .games is hidden.
   new category: add a marker span, a filter link and one line in each block below. */

.ft { display: block; height: 0; scroll-margin-top: 80px; }

.works:has(.ft:target:not(#all)) .group { display: none; }

.works:has(#games:target)       .group.games,
.works:has(#spaces:target)      .group.spaces,
.works:has(#instruments:target) .group.instruments,
.works:has(#film:target)        .group.film,
.works:has(#music:target)       .group.music { display: block; }

/* the active filter link is bold */
.works:not(:has(.ft:target:not(#all))) .jump a[href="#all"],
.works:has(#games:target)       .jump a[href="#games"],
.works:has(#spaces:target)      .jump a[href="#spaces"],
.works:has(#instruments:target) .jump a[href="#instruments"],
.works:has(#film:target)        .jump a[href="#film"],
.works:has(#music:target)       .jump a[href="#music"] { font-weight: bold; text-decoration: none; }

.label {
  margin: 28px 0 8px;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--quiet);
}

.credit { font-size: 11px; color: var(--quiet); }
.lead { margin: 28px 0; }
.soon { color: var(--quiet); }


.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.trio a { outline: 1px solid var(--ink); padding: 8px; }
.trio img { aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 6px; background: #111; }
.trio span { display: block; color: var(--quiet); }

ol, ul { padding-left: 2.5ch; }
li { margin-bottom: 4px; }

/* ---------- small screens ---------- */

@media (max-width: 960px) {
  /* the fern becomes a horizontal banner above the name, aligned with the content boxes */
  .fern {
    position: static;
    display: block;
    width: calc(100% - 32px);
    height: 120px;
    margin: 24px 16px 0;
    object-fit: cover;
    object-position: center 55%;   /* the band where the plants meet the red */
  }

  .wrap { flex-direction: column; gap: 16px; margin: 20px 16px 40px; }
  .side { position: static; flex: none; }
  .role { margin-bottom: 16px; }
  .content { max-width: none; }
  .trio { grid-template-columns: 1fr; }

  /* on a phone the project tree would fill a whole screen before any content.
     show the main links in one row instead; the works page has the category filter. */
  .menu .tree { display: none; }
  .menu { white-space: normal; display: flex; flex-wrap: wrap; gap: 4px 16px; }

  .head { font-size: 19px; }
  .jump { gap: 8px 14px; font-size: 14px; }       /* easier to tap */
}