/* The website's stylesheet.
 *
 * This is the whole look of the site. Edit it directly — you do not need to
 * touch any Python. Run build.py (or press Rebuild site in the editor) and
 * the change appears.
 *
 * It is copied into site/style.css verbatim at build time. Do not edit
 * site/style.css: that copy is overwritten on every build.
 *
 * First design pass (27 Sept 2026) follows marktribestudio.com: white page,
 * black Helvetica, one left-aligned column of pictures with a plain caption
 * under each, a plain wordmark and a small grey nav row above.
 */
:root{
  --page:#fff; --ink:#000; --dim:#555; --faint:#999;
  --line:#e2e2e2; --accent:#000;
  --col:680px;        /* the picture column */
  --gutter:7.5rem;    /* space from the left edge on a wide screen */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--page);color:var(--ink);
  font:400 14px/1.5 Helvetica,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* top matter */
header.site{padding:3.5rem var(--gutter) 0}
.wordmark{font-size:30px;font-weight:400;letter-spacing:.02em;line-height:1.2}
nav.site{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;padding-bottom:2.5rem}
nav.site a{font-size:12px;line-height:18px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
nav.site a:hover{color:var(--ink);text-decoration:none}

/* the stream */
main{padding:0 0 8rem}
.entry{padding:0 var(--gutter);max-width:calc(var(--col) + var(--gutter) * 2)}
.year{display:none}          /* the year rides in the caption, as on the old site */
.piece{padding:0 0 3.5rem;max-width:var(--col)}
.piece img,.piece .vidbox{width:100%;display:block;background:#f2f2f2}
figure.noimg .frame{aspect-ratio:3/2;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--faint);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:2rem}
.cap{margin-top:.9rem;display:flex;flex-direction:column;gap:0}
.title{font-size:14px;line-height:21px;font-style:normal}
.media{font-size:14px;line-height:21px;color:var(--ink)}
.door{margin-top:.6rem;font-size:12px;line-height:18px;text-transform:uppercase;
  letter-spacing:.02em;color:var(--faint);display:inline-flex;gap:.4rem}
.door:hover{color:var(--ink)}
.hist{margin-top:.3rem;font-size:12px;line-height:18px;color:var(--faint)}

/* detail pages */
.detailwrap{max-width:calc(var(--col) + var(--gutter) * 2);padding:2.5rem var(--gutter) 8rem}
.back{font-size:12px;line-height:18px;text-transform:uppercase;color:var(--faint);
  display:inline-block;margin-bottom:2rem}
.detailwrap h1{font-weight:700;font-size:18px;line-height:1.4;margin-bottom:1.2rem}
/* A section title with a rule under it, as on the old About page. */
.detailwrap h1.ruled{font-weight:400;font-size:24px;line-height:1.25;
  text-transform:uppercase;
  padding-bottom:.8rem;margin-bottom:1.6rem;border-bottom:1px solid #222}

/* The biography: portrait floated into the top right, text wrapping round. */
.portrait{float:right;width:50%;max-width:332px;margin:0 0 1.2rem 1.6rem;display:block}
.txt.flow{text-align:justify;margin-bottom:1.1rem}
.clear{clear:both}

/* Exhibitions, set as the old site set them: a bold title, venue and place,
   the dates, then the description, with the install shot floated right and a
   rule between one show and the next. */
.ex{max-width:var(--col);padding:0 0 1.6rem;margin-bottom:1.6rem;
  border-bottom:1px solid var(--line);
  /* A work page links here as exhibitions.html#<id>. Without this the show
     lands flush against the top of the window with its rule off-screen. */
  scroll-margin-top:1.6rem}
.ex:last-of-type{border-bottom:0}
.exshot{float:right;width:55%;max-width:360px;margin:.2rem 0 1rem 1.6rem;display:block}
.extitle{font-size:14px;line-height:21px;font-weight:700;margin:0 0 .7rem}
.exvenue{font-weight:700;line-height:21px}
.exwhere,.exwhen{line-height:21px}
.excurator{line-height:21px;margin-top:.7rem}
.extext{line-height:21px;margin:.7rem 0 0}
.exworks,.exlink{line-height:21px;margin:.7rem 0 0}
.exworks a,.exlink a{text-decoration:underline}
/* "Works shown" labels the list without taking a line of its own, so forty
   blocks do not each grow taller. Same grey and size as .eyebrow. */
.exlabel{display:block;font-size:12px;line-height:18px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
@media(max-width:640px){
  .exshot{float:none;width:100%;max-width:none;margin:0 0 1rem}
}

/* The CV, fetched from the Google Doc. It arrives as bare tags and takes the
   site's own type; only the spacing is set here. */
.cv{max-width:var(--col);margin-top:.5rem}
.cv h1,.cv h2{font-size:14px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;margin:2rem 0 .6rem}
.cv h3,.cv h4{font-size:14px;font-weight:700;margin:1.4rem 0 .3rem}
.cv p{line-height:21px;margin:0 0 .5rem}
.cv ul,.cv ol{margin:0 0 .8rem;padding-left:1.2rem}
.cv li{line-height:21px}
.cv a{text-decoration:underline}
.cv table{border-collapse:separate;border-spacing:2px;width:100%;margin:0 0 1rem}
/* The CV's old layout: the year hanging in a narrow left column, the entry
   beside it, no rules. The column sizes itself to the widest year, as it
   always did, so a section with "2013-present" in it simply gets a wider one. */
.cv td{vertical-align:top;padding:3px;line-height:21px;text-align:left;font-weight:400}
/* 67px is the width the old site's year column settled at. nowrap lets a
   range like "2013-present" push its own section's column wider, which is
   what the old tables did too. */
.cv tr>td:first-child{width:67px;white-space:nowrap;padding-right:.6rem}
@media(max-width:640px){
  .portrait{float:none;width:100%;max-width:none;margin:0 0 1.4rem}
  .txt.flow{text-align:left}
}
.detailwrap .lede{max-width:var(--col);color:var(--ink);line-height:21px;margin-bottom:2rem}
.detailgrid{display:grid;gap:2.5rem;max-width:var(--col)}
.detailgrid img{width:100%;display:block}
.eyebrow{font-size:12px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin:2.5rem 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.row{padding:.45rem 0;border-bottom:1px solid var(--line);display:flex;gap:1.2rem;
  max-width:var(--col)}
.row b{font-weight:400;color:var(--faint);min-width:9rem;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;padding-top:.1rem}
.txt{margin:0 0 1.4rem;white-space:pre-wrap;line-height:21px;max-width:var(--col)}
.txtmeta{font-size:12px;color:var(--faint);margin-bottom:.4rem}
ul.plain{list-style:none;max-width:var(--col)}
ul.plain li{padding:.45rem 0;border-bottom:1px solid var(--line);line-height:21px}
.cite{color:var(--dim)}
@media(max-width:900px){:root{--gutter:2.5rem}}
@media(max-width:640px){
  :root{--gutter:1.25rem}
  header.site{padding-top:2rem}
  .wordmark{font-size:24px}
  nav.site{gap:.6rem 1rem}
}