@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
:root { --bg:#e2d5c6; --text:#000; --line:#c7b5a4; --accent:#00A99D; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Libre Baskerville",Georgia,"Times New Roman",serif; line-height:1.55; }
a, a:visited { color:#000; }
.layout { display:grid; grid-template-columns:150px 1fr; gap:1rem; max-width:1100px; margin:0 auto; padding:2.5rem 1.5rem; }
aside { position:sticky; top:2.5rem; align-self:start; }
/* the name and the page title share the same size, line height and top edge, so they always line up */
.name, main h1 { font-size:1.4rem; line-height:1.3; font-weight:400; margin-top:0; }
.name { display:block; letter-spacing:-0.02em; text-decoration:none; margin-bottom:2rem; }
nav ul { list-style:none; margin:0; padding:0; }
nav a { display:block; font-size:.95rem; padding:.3rem 0; text-decoration:none; }
.sub { padding-left:1rem; margin:.1rem 0 .5rem; }
.sub a { font-size:.85rem; }
nav a[aria-current] { text-decoration:underline; text-underline-offset:4px; }   /* the category you are viewing */
main h1 { margin-bottom:1.2rem; }
main > p { max-width:60ch; font-size:.9rem; }
main > p:first-child { margin-top:6px; }

/* the list */
table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:.85rem; }
.c-thumb { width:136px; }
.c-desc  { width:38%; }
.c-year  { width:60px; }
td { text-align:left; padding:.8rem .6rem; vertical-align:top; border-top:1px solid var(--line); overflow-wrap:break-word; }
tr:last-child td { border-bottom:1px solid var(--line); }
td.thumb { padding-left:0; }
.thumb .ph { position:relative; overflow:hidden; width:120px; height:120px; border-radius:3px; }
.thumb img { position:absolute; left:0; top:0; display:block; width:120px; height:120px; object-fit:cover; mix-blend-mode:multiply; }
td.year { white-space:nowrap; text-align:right; }
td a, button.exp { text-decoration:underline; text-underline-offset:3px; }
button.exp { font:inherit; color:#000; background:none; border:0; padding:0; text-align:left; cursor:pointer; }
button.exp::after { content:" +"; display:inline-block; text-decoration:none; }
button.exp[aria-expanded="true"]::after { content:" \2212"; }
tr.has-more { cursor:pointer; }
a:hover, button.exp:hover, nav a:hover { color:var(--accent); }
a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
tr[hidden] { display:none !important; }

/* a row opened in place: thumbnail stays in the first column, title + text under it, large images across the two right-hand columns */
tr.open td.oimgs { padding-right:0; }
tr.open figure { margin:0 0 .8rem; }
tr.open figure img { display:block; width:100%; height:auto; border-radius:3px; }
tr.open figcaption { font-size:.8rem; margin-top:.3rem; }
tr.open .line { margin:0 0 .15rem; }
tr.open .body { margin-top:1.1rem; }
tr.open .body p { max-width:62ch; margin:0 0 .9rem; }
td.empty { padding-left:0; }

@media (max-width:760px) {
  .layout { grid-template-columns:1fr; gap:1.5rem; padding-top:1.5rem; }
  aside { position:static; }
  .name { margin-bottom:1rem; }
  colgroup { display:none; }
  table, tbody { display:block; width:100%; }
  tr { display:grid; grid-template-columns:96px 1fr; column-gap:.9rem; border-top:1px solid var(--line); padding:.8rem 0; }
  tr:last-child { border-bottom:1px solid var(--line); }
  td { grid-column:2; width:auto !important; border:0 !important; padding:.1rem 0; text-align:left !important; }
  td.thumb { grid-column:1; grid-row:1 / span 5; }
  .thumb .ph, .thumb img { width:96px; height:96px; }
  td.empty { grid-column:1 / -1; }
  tr.open { display:block; }
  tr.open td { display:block; padding:.2rem 0; }
  tr.open td.oimgs { margin-top:.8rem; }
  tr.open .body { margin-top:.9rem; }
}