/* Layout: a printed spread. A thin header bar (sun, sections, search),
   a centred italic name, then three columns: the legend as a dotted list
   in the margin, one work as a plate with its caption, the bio as body text.
   Little below. One serif throughout. */
:root {
  --paper: #f7f6f2;
  --ink: #141414;
  --muted: #6e6e6e;
  --rule: #141414;
  --hair: #dcdcdc;
  /* Cochin is built into Apple devices; every other device gets Cormorant Garamond */
  --serif: Cochin, "Cormorant Garamond", Georgia, serif;
  --name-font: var(--serif);
  --margin-col: 12.5rem;
  color-scheme: light;
}
/* dark: dark grey paper, white and light grey type */
:root[data-theme="dark"] {
  --paper: #1c1c1c; --ink: #f3f2ee; --muted: #a9a8a4; --rule: #8c8b88; --hair: #3a3a39;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  transition: background-color .35s ease, color .35s ease;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem; line-height: 1.4;
  font-optical-sizing: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 3rem;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.smallcaps, .dateline, .contents__item, .bio__head {
  text-transform: uppercase; letter-spacing: .06em; font-size: .72rem;
}
.placeholder { color: var(--muted); font-style: italic; }

/* ink: every piece of text carries a very faint bleed (images and the sun are left clean) */
.ink-filters { position: absolute; width: 0; height: 0; overflow: hidden; }
.dateline, .caption, .bio, .marks, .contents, .portrait figcaption,
.lower, .colophon, .theme-toggle, .status { filter: url(#ink); }
.name { filter: url(#ink); }

/* header bar */
.head { max-width: 86rem; margin: 0 auto; }
.topbar {
  max-width: 86rem; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: .9rem;
}
/* one thin line across the whole page under the sun and search */
.rule { border: 0; border-top: .5px solid var(--rule); margin: 0 calc(50% - 50vw); width: 100vw; }
.tools { display: flex; align-items: center; gap: 1.25rem; }
.sun { width: 2rem; height: 2rem; display: block; justify-self: start; }
/* the sun: its own 40 frames used as a mask, inked in the same colour as the type */
.sun__glyph {
  display: block; width: 100%; height: 100%;
  background: var(--ink);
  -webkit-mask-image: url(assets/symbol-frames.png); mask-image: url(assets/symbol-frames.png);
  -webkit-mask-size: 4000% 100%; mask-size: 4000% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0%; mask-position: 0% 0%;
  transition: background-color .35s ease;
  animation: sun-turn 2s steps(40, jump-none) infinite;
}
@keyframes sun-turn {
  from { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; }
  to { -webkit-mask-position: 100% 0%; mask-position: 100% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .sun__glyph { animation: none; }
}
.theme-toggle {
  all: unset; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem;
  color: var(--muted);
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }
.search {
  width: 13rem; text-align: left;
  font: inherit; font-size: .85rem; color: var(--ink);
  background: transparent; border: .5px solid var(--rule); border-radius: 0;
  padding: .3rem .5rem; outline: none; -webkit-appearance: none; appearance: none;
}
.search::placeholder { color: var(--muted); font-style: italic; }
.search:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 .5px var(--ink); }

/* name and dateline sit small in the header, beside the sun */
.ident { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1rem; min-width: 0; }
.name {
  margin: 0; font-family: var(--name-font); font-weight: 400; font-style: italic;
  font-size: 1.2rem; line-height: 1;
}
.dateline { margin: 0; color: var(--muted); }

/* the spread */
.spread {
  max-width: 86rem; margin: 0 auto; padding-top: 2rem;
  display: grid; gap: 2rem;
  grid-template-columns: var(--margin-col) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

/* margin: a short rule, portrait (from arena, if set), the dotted legend, then the contents */
.contents { list-style: none; margin: .25rem 0 0; padding: 0; }
.contents li { border-top: .5px solid var(--rule); }
.contents li:last-child { border-bottom: .5px solid var(--rule); }
.contents__item { all: unset; cursor: pointer; display: block; width: 100%; padding: .45rem 0; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.contents__item:hover, .contents__item[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }
.contents__item:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.bio__head { margin: 0 0 .9rem; font-weight: 400; color: var(--muted); }
.portrait { margin: 0 0 .5rem; display: grid; gap: .35rem; }
.portrait img { width: 100%; height: auto; }
.portrait figcaption { font-size: .72rem; line-height: 1.3; color: var(--muted); padding-bottom: .6rem; border-bottom: .5px solid var(--rule); }
.margin { font-size: .8rem; line-height: 1.35; display: grid; gap: 1rem; position: sticky; top: 1rem; }
.margin [data-categories] { display: grid; gap: 1.1rem; }
.marks { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.mark { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: .5em; }
.mark--empty { display: inline-flex; align-items: baseline; gap: .5em; }
.mark::before {
  content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%;
  background: currentColor; transform: translateY(-.05em);
}
.mark:hover, .mark[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }
.mark:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.mark--empty { color: var(--muted); }

/* plate: one work */
.plate { min-width: 0; display: grid; gap: .75rem; scroll-margin-top: 1rem; }
.plate.is-empty .plate__figure, .plate.is-empty .caption, .plate.is-empty .plate__mores { display: none; }
.plate__figure { margin: 0; }
.plate__figure img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; object-position: left top; background: var(--paper); }
.caption { font-size: .85rem; line-height: 1.35; display: grid; gap: .1rem; }
.caption p { margin: 0; }
.caption__title { font-size: 1rem; }
.caption__id { margin-top: .4rem !important; color: var(--muted); font-size: .8rem; }
.plate__mores { display: flex; gap: .5rem; flex-wrap: wrap; }
.plate__mores:empty { display: none; }
.plate__more { all: unset; cursor: pointer; height: 3.25rem; opacity: .55; }
.plate__more img { height: 100%; width: auto; }
.plate__more[aria-current="true"], .plate__more:hover { opacity: 1; }
.plate__more:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

.strip {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: flex-end;
  padding-top: 1rem; margin-top: .5rem; border-top: .5px solid var(--hair);
}
.strip__item { all: unset; cursor: pointer; height: 3.25rem; }
.strip__item img { height: 100%; width: auto; filter: grayscale(.15); }
.strip__item[aria-current="true"] { outline: 1px solid var(--ink); outline-offset: 3px; }
.strip__item:hover img { filter: none; }
.strip__item:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.status { margin: 0; color: var(--muted); font-style: italic; }

/* bio: body text, set like a book page */
.bio { min-width: 0; scroll-margin-top: 1rem; }
.bio__text { font-size: 1.3rem; line-height: 1.32; max-width: 34rem; display: grid; gap: .9em; }
.bio__text p { margin: 0; hanging-punctuation: first; }

/* below: quiet sections */
.lower {
  max-width: 86rem; margin: 3rem auto 0;
  padding-left: calc(var(--margin-col) + 2rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem;
  font-size: .9rem;
}
.lower section { scroll-margin-top: 1rem; }
.section-head {
  margin: 0 0 .5rem; font-weight: 400; font-size: 1.15rem; line-height: 1.2;
  padding-bottom: .4rem; border-bottom: .5px solid var(--rule);
}

.colophon {
  max-width: 86rem; margin: 3rem auto 0; padding-top: 1rem;
  border-top: .5px solid var(--rule); font-size: .8rem;
}
.colophon a { text-decoration: none; }
.colophon a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* narrower screens: margin moves under the plate, bio follows */
@media (max-width: 1080px) {
  .spread { grid-template-columns: var(--margin-col) minmax(0, 1fr); }
  .bio { grid-column: 2; }
}
@media (max-width: 720px) {
  .spread { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-top: 1.25rem; }
  .bio { grid-column: auto; }
  .tools { gap: .9rem; }
  .topbar { align-items: flex-start; }
  .ident { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: .4rem .6rem; }
  .name { font-size: 1.05rem; }
  .dateline { grid-column: 1 / -1; font-size: .64rem; }
  .tools { flex-direction: column-reverse; align-items: flex-end; gap: .45rem; }
  .search { width: 7.5rem; }
  .portrait { max-width: 9rem; }
  .margin { position: static; order: 2; }
  .margin [data-categories] { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
  .contents { display: flex; flex-wrap: wrap; gap: 0 1.25rem; border-top: .5px solid var(--rule); border-bottom: .5px solid var(--rule); }
  .contents li, .contents li:last-child { border: 0; }
  .marks { display: contents; }
  .plate { order: 1; }
  .bio { order: 3; }
  .bio__text { font-size: 1.15rem; }
  .lower { padding-left: 0; margin-top: 2.5rem; grid-template-columns: minmax(0, 1fr); }
  .plate__figure img { max-height: 70vh; }
}