/* exhibition-board: one stylesheet for every page.
   white, ink, two greys, link blue. helvetica for the title, the headings, labels and
   links (a placeholder while the group decides), times for prose. every separation is
   one device pixel. */

:root{
  --bg:#fff;
  --fg:#111;
  --dim:#6b6b6b;
  --faint:#9a9a9a;
  --rule:#dcdcdc;
  --wash:#f2f2f2;
  --link:#0000ee;
  --visited:#551a8b;
  --serif:"Times New Roman",Times,"Liberation Serif","Hiragino Mincho ProN","Yu Mincho",serif;
  --display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Helvetica Neue",Helvetica,Arial,sans-serif;
  /* the title face, switched from the moderation page; --title-k scales each face so its
     capitals stand as tall as helvetica's at the same nominal size */
  --title:var(--display);
  --title-k:1;
  --title-lh:1;
  --title-track:-.03em;
  --hair:.5px;
  --s0:3px; --s1:6px; --s2:12px; --s3:22px; --s4:40px; --s5:72px;
  --t2:18px;    /* the one heading on a page */
  --t3:13px;    /* prose, fields */
  --t4:12px;    /* names, secondary copy */
  --t5:11px;    /* links, figures */
  --t6:10.5px;  /* labels */
  --track-label:.01em;
  --chrome:104px;       /* space the bottom chrome needs on a document page */
}
@media (max-resolution:1.5dppx){:root{--hair:1px}}
:root[data-font=arial]{--title:Arial,"Helvetica Neue",Helvetica,sans-serif;--title-k:1;--title-track:-.03em}
:root[data-font=narrow]{--title:"Arial Narrow","Archivo Narrow",Arial,sans-serif;--title-k:1;--title-track:-.01em}
:root[data-font=times]{--title:var(--serif);--title-k:1.08;--title-lh:.98;--title-track:-.01em}
:root[data-font=redaction]{--title:Redaction,"Times New Roman",serif;--title-k:1.05;--title-lh:.98;--title-track:-.01em}
:root[data-font=redaction35]{--title:"Redaction 35",Redaction,"Times New Roman",serif;--title-k:1.05;--title-lh:.98;--title-track:-.01em}
:root[data-font=redaction50]{--title:"Redaction 50",Redaction,"Times New Roman",serif;--title-k:1.05;--title-lh:.98;--title-track:-.01em}
:root[data-font=garamond]{--title:"EB Garamond",Garamond,"Times New Roman",serif;--title-k:1.12;--title-lh:.98;--title-track:0}
/* served only where arial narrow is missing, which is every phone */
@font-face{font-family:"Archivo Narrow";src:url(/fonts/ArchivoNarrow-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Redaction;src:url(/fonts/Redaction-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Redaction 35";src:url(/fonts/Redaction35-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Redaction 50";src:url(/fonts/Redaction50-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/fonts/EBGaramond-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font:var(--t3)/1.5 var(--serif);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:visited{color:var(--visited)}
a:hover{color:var(--dim)}
button.link{font:inherit;color:var(--link);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;letter-spacing:inherit}
button.link:hover{color:var(--dim)}
:focus-visible{outline:var(--hair) solid var(--fg);outline-offset:2px}
h1{font:400 calc(var(--t2) * var(--title-k))/1.2 var(--title);letter-spacing:-.01em;overflow-wrap:anywhere}
h2{font:400 var(--t3)/1.4 var(--display)}
h3{font:inherit}
.lbl{font:var(--t6)/1.5 var(--mono);letter-spacing:var(--track-label);color:var(--faint)}
.fig{font-variant-numeric:tabular-nums}
.dim{color:var(--dim)}
.name{color:var(--fg)}
.lbl a{color:var(--link)}
.lbl .name{color:var(--fg)}

/* ── the board: a plane of works at their own proportions, the masthead in the middle ── */

.boardpage{overflow:hidden;overscroll-behavior:none}
.viewport{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:crosshair;outline:none;user-select:none;-webkit-user-select:none}
.viewport[data-open="0"]{cursor:default}
.viewport.dragging{cursor:grabbing}
.plane{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}

/* a work is its image with the label line under it; the box height includes the label.
   the link's own colour is the label's, so a visited work reads purple */
.w{position:absolute;display:block;color:var(--link);text-decoration:none;cursor:pointer;-webkit-user-drag:none;
  --mx:-999px;--my:-999px;--r:48px}
.w:visited{color:var(--visited)}
.w__img{position:relative;display:block;height:calc(100% - 16px);overflow:hidden}
.w .pic{display:block;width:100%;height:100%;object-fit:cover;background:var(--wash);-webkit-user-drag:none}
/* the fog: a backdrop blur at the image's own size, masked by a soft smoothstep hole
   that follows the pointer (--mx, --my, --r in the image's own px, set by board.js) and
   lifts the blur there, like a wipe with no trail. a blurred copy of the image was tried
   and had to be bled past the box to hide its fading edge, which scaled it and read as
   a zoom on hover. the white veil sits on the caption and stays even: a veil that
   thinned across the hole banded, a few levels of tint over fifty pixels being more
   than eight bits can draw smoothly. */
.w .fog{position:absolute;inset:0;opacity:0;transition:opacity .25s ease;pointer-events:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.368) 10%,rgba(0,0,0,0.418) 20%,rgba(0,0,0,0.49) 30%,rgba(0,0,0,0.579) 40%,rgba(0,0,0,0.675) 50%,rgba(0,0,0,0.771) 60%,rgba(0,0,0,0.86) 70%,rgba(0,0,0,0.932) 80%,rgba(0,0,0,0.982) 90%,#000 100%);
  mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.368) 10%,rgba(0,0,0,0.418) 20%,rgba(0,0,0,0.49) 30%,rgba(0,0,0,0.579) 40%,rgba(0,0,0,0.675) 50%,rgba(0,0,0,0.771) 60%,rgba(0,0,0,0.86) 70%,rgba(0,0,0,0.932) 80%,rgba(0,0,0,0.982) 90%,#000 100%)}
.w .cap{position:absolute;inset:0;padding:8px 10px;opacity:0;transition:opacity .25s ease;pointer-events:none;
  background:rgba(255,255,255,.3);display:flex;flex-direction:column;justify-content:space-between;gap:3px}
/* the clear board: fog and words come on hover. the fogged board: every work fogged and
   captioned until its page has been seen; a seen work stands clear until hovered again */
.w:hover .cap,.w.show .cap,.w:focus-visible .cap,.w:hover .fog,.w.show .fog,.w:focus-visible .fog{opacity:1}
.fogged .w:not(.seen) .fog,.fogged .w:not(.seen) .cap{opacity:1}
/* the words are white with a faint halo, no offset, so they hold on mid-tone images
   without reading as a shadow; on a near-white work (the pale flag) they are ink instead */
.w .name{font:400 12px/1.2 var(--display);text-transform:lowercase;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w .line{font-size:12px;line-height:1.3;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.w .name,.w .line{text-shadow:0 0 6px rgba(0,0,0,.3),0 0 1px rgba(0,0,0,.25)}
.w.pale .name,.w.pale .line{color:var(--fg);text-shadow:none}
.w__label{position:absolute;left:0;bottom:0;max-width:100%;height:16px;font:400 10px/16px var(--display);color:inherit;
  text-transform:lowercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w:hover .w__label{text-decoration:underline;text-underline-offset:2px}
/* the latest notes, under the label and outside the box, one line each */
.w__notes{position:absolute;left:0;top:100%;width:100%;display:block;font:10px/1.4 var(--serif);color:var(--dim);
  text-transform:none;pointer-events:none}
.w__note{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w__who{color:var(--faint)}
/* the opening: the plane white and every image blurred until the zoom toward the
   masthead is under way; both fade over the same .6s */
.plane{transition:opacity .6s ease}
.plane.intro{opacity:0}
.w .pic{transition:filter .6s ease}
.plane.intro .w .pic{filter:blur(6px)}
.w.pale .w__img{box-shadow:0 0 0 var(--hair) rgba(0,0,0,.16)}
.w.here .w__img{outline:1px solid var(--fg);outline-offset:4px}

.mast{position:absolute;text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 var(--s3);cursor:default}
/* the head shrinks to the title's width, so the theme can sit on its right edge */
.mast__head{display:block;margin-bottom:16px}
.mast__title{font:400 calc(84px * var(--title-k))/var(--title-lh) var(--title);letter-spacing:var(--title-track);margin-left:-.05em}
.mast__title--doc{font-size:calc(40px * var(--title-k));margin-bottom:var(--s3)}
.mast__theme{font:400 calc(24px * var(--title-k))/1.2 var(--title);letter-spacing:-.01em;margin-top:var(--s2);text-align:right}
.mast__theme a{color:var(--link);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.mast__theme a:visited{color:var(--link)}
.mast__theme a:hover{color:var(--dim)}
.mast__pointer{text-align:right;margin-top:var(--s0)}
.mast__blurb{font-size:15px;line-height:1.45;max-width:500px}
.mast__place{margin-top:18px;font:700 var(--t5)/1.5 var(--mono);letter-spacing:var(--track-label);color:var(--fg)}
.mast__count{margin-top:var(--s0)}
.slotword{font:22px/0 var(--display);letter-spacing:.2em;padding-left:.2em;vertical-align:-2px}
.countdown:not([hidden])::before{content:" · "}

/* the mark for a place not yet taken, following the pointer over empty plane */
.slot{position:fixed;pointer-events:none;font:16px/1 var(--display);color:var(--fg);
  transform:translate(-50%,-50%);letter-spacing:.3em;padding-left:.3em;z-index:1}

/* ── chrome: the wordmark top left, links bottom right, nothing filled ────────── */

.brand{position:fixed;left:var(--s3);top:18px;font:calc(16px * var(--title-k))/1 var(--title);letter-spacing:-.01em;text-decoration:none;z-index:3}
.brand:visited{color:var(--link)}
.brand:hover{color:var(--dim)}
.links{position:fixed;right:var(--s3);bottom:var(--s3);display:flex;gap:var(--s3);align-items:baseline;
  justify-content:flex-end;flex-wrap:wrap;font:var(--t5)/1.6 var(--mono);letter-spacing:var(--track-label);color:var(--dim);z-index:3}
.links a,.links button.link{text-underline-offset:3px}
.links .zoom{display:inline-flex;gap:var(--s2)}
@media (max-width:640px){
  .links{left:var(--s3);right:var(--s3);justify-content:flex-start;gap:var(--s2)}
}

details.about summary{list-style:none;cursor:pointer;color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
details.about summary::-webkit-details-marker{display:none}
details.about summary:hover{color:var(--dim)}
.pane{position:fixed;top:0;right:0;bottom:0;width:min(340px,100%);background:var(--bg);color:var(--fg);
  border-left:var(--hair) solid var(--rule);display:flex;flex-direction:column;z-index:6;cursor:auto;text-align:left;
  font:var(--t3)/1.5 var(--serif);letter-spacing:0}
.pane__head{display:flex;justify-content:space-between;align-items:baseline;padding:var(--s3) var(--s3) var(--s2);
  border-bottom:var(--hair) solid var(--rule)}
.pane__head h2{font-size:var(--t2);line-height:1.06}
.pane__body{flex:1;overflow-y:auto;padding:var(--s2) var(--s3) var(--s4)}
.pane__body h3{margin-top:var(--s2)}
.pane__body p{margin:var(--s0) 0 var(--s2)}
.prompts{margin:0 0 var(--s2) var(--s2);padding:0}
.prompts li{margin-bottom:var(--s0)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s0) var(--s2);font-size:var(--t4);line-height:1.62;margin:var(--s1) 0 var(--s2)}
.kv dt{color:var(--dim)}
.kv dd{text-align:right;overflow-wrap:anywhere}
@media (max-width:520px){.pane{width:100%;border-left:0}}

/* ── document pages: list, detail, submit, withdraw, moderation ────────── */

.docpage{min-height:100%}
.doc{max-width:640px;padding:var(--s5) var(--s3) calc(var(--chrome) + var(--s3))}
.doc h1{margin-bottom:var(--s2)}
.doc p{margin:0 0 var(--s2)}
.doc h2{margin:var(--s4) 0 var(--s1)}
.actions{display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap}
.actions form{display:inline}
form.inline{display:inline}
.note{color:var(--fg)}

.list{list-style:none;margin-top:var(--s3)}
.list li a{display:grid;grid-template-columns:48px 1fr auto auto;gap:var(--s2);align-items:center;
  padding:var(--s1) 0;border-top:var(--hair) solid var(--rule);text-decoration:none}
.list li:last-child a{border-bottom:var(--hair) solid var(--rule)}
.list li a:hover .name{text-decoration:underline;text-underline-offset:2px}
.list img{display:block;width:48px;height:48px;object-fit:cover;background:var(--wash)}
.list__text{min-width:0;overflow-wrap:anywhere}
.list__text .dim{font-size:var(--t4)}
.list .when{text-align:right}
.chain{list-style:none;margin-top:var(--s2)}
.chain li{padding:var(--s0) 0}

.work{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s4);align-items:start;
  padding:var(--s5) var(--s3) calc(var(--chrome) + var(--s3))}
.work__figure{min-width:0}
.work__img,.work__video{display:block;max-width:100%;max-height:calc(100vh - var(--chrome) - var(--s5) - var(--s3));width:auto;height:auto}
.work__video{background:#000;width:100%}
/* an image opens at its own size, capped to the viewport; zoomed, it fills the column */
.work--image .work__img{cursor:zoom-in}
.work--zoomed .work__img{cursor:zoom-out;width:100%;max-height:none}
/* the heading seats on the top edge of the figure: halfLeading + (ascent - capHeight) for
   redaction at 1.06 is close to times, .2em */
.work__text h1{line-height:1.06;margin:-0.2em 0 var(--s1)}
.work__text .lbl{margin-bottom:var(--s3)}
.statement p{margin:0 0 var(--s2)}
.work__line{margin-top:var(--s3)}
.work__nav{margin-top:var(--s2);display:flex;gap:var(--s2)}
.notes{margin-top:var(--s4);max-width:300px}
.notes h2{margin-bottom:var(--s1)}
.notes__list{list-style:none}
.notes__list li{padding:var(--s1) 0;border-top:var(--hair) solid var(--rule);font-size:var(--t4);line-height:1.45}
.notes__list li:last-child{border-bottom:var(--hair) solid var(--rule)}
.notes__form{margin-top:var(--s2)}
.notes__form label{display:block;margin-bottom:var(--s1)}
.notes__row{display:flex;gap:var(--s2);align-items:baseline;margin-top:var(--s1)}
.notes__row input{flex:1}
.notes__form .note{margin-top:var(--s1);color:var(--fg)}
@media (max-width:760px){
  .work{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .work__text h1{margin-top:0}
}

.pdf{height:calc(100vh - var(--chrome) - var(--s5) - var(--s3) - 28px);min-height:240px;overflow:auto;border:var(--hair) solid var(--rule);background:var(--wash)}
.pdf canvas{display:block}
.pdf__status{padding:var(--s2)}
.pdfbar{display:flex;gap:var(--s2);align-items:baseline;margin-top:var(--s1)}

.embed img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--wash)}
.embed iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.embed__play{margin-top:var(--s1);display:flex;gap:var(--s2);align-items:baseline}

/* the map of the plane on the form: fills only, the spot in ink */
.map{display:block;width:100%;max-width:480px;height:auto;margin:var(--s2) 0 var(--s1);background:var(--bg)}
.map__mast{fill:var(--wash)}
.map__w{fill:var(--rule)}
.map__you{fill:var(--fg)}
#spot{margin-bottom:var(--s3)}
#spot .lbl{margin:0}

/* fields: one measure, hairline underlines, no boxes except the statement */
.form{max-width:480px}
.field{margin:0 0 var(--s3);border:0;min-width:0}
.field label,.field legend,.field__label{display:block;font-size:var(--t4);margin-bottom:var(--s1)}
.choices{display:flex;flex-direction:column;gap:var(--s0);font-size:var(--t4)}
.choices label{display:flex;gap:var(--s1);align-items:baseline;margin:0}
.choices .other{width:12em;padding:0}
.checks .check{display:flex;gap:var(--s1);align-items:baseline;font-size:var(--t4);margin-bottom:var(--s1)}
.checks input{margin-top:0}
.field .lbl{margin-top:var(--s1)}
.field .cells{display:flex;gap:var(--s3);margin-bottom:var(--s2);font-size:var(--t4)}
.field .cells label{display:inline;margin:0}
.questions .field{margin-bottom:var(--s2)}
.questions > .lbl{margin:0 0 var(--s2)}
input[type=text],input[type=email],input[type=url],input[type=password],input[type=number],textarea{
  font:inherit;letter-spacing:inherit;width:100%;border:0;border-bottom:var(--hair) solid var(--fg);
  background:none;padding:var(--s0) 0;color:var(--fg);border-radius:0}
input[type=number]{width:4.5em;text-align:right}
textarea{border:var(--hair) solid var(--rule);padding:var(--s1);resize:vertical;line-height:1.5}
.questions textarea{border:0;border-bottom:var(--hair) solid var(--fg);padding:var(--s0) 0;resize:none}
input:focus,textarea:focus{outline:none;border-color:var(--fg)}
input[type=file]{font:inherit;font-size:var(--t4);max-width:100%}
input[type=radio]{margin-right:var(--s0)}
#preview img{display:block;max-width:160px;max-height:160px;width:auto;height:auto;margin-top:var(--s2)}
.withdraw{overflow-wrap:anywhere}
.withdraw__card{display:flex;gap:var(--s2);align-items:center}
.withdraw__card img{display:block;width:96px;height:96px;object-fit:cover}
.over{color:var(--fg)}

/* moderation */
.adminpage .doc{max-width:860px}
.status{margin-bottom:var(--s3)}
.site{margin-bottom:var(--s4)}
.site h2{margin:0 0 var(--s1)}
.site .cells{display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap;font-size:var(--t4);margin:0 0 var(--s1)}
.site .cells label{margin:0}
.mod{display:grid;grid-template-columns:64px 1fr;gap:var(--s2);padding:var(--s2) 0;border-top:var(--hair) solid var(--rule)}
.mod:last-child{border-bottom:var(--hair) solid var(--rule)}
.mod img{display:block;width:64px;height:64px;object-fit:cover;background:var(--wash)}
.mod__text p{margin:0 0 var(--s0)}
.mod__statement{font-size:var(--t4);color:var(--dim);margin:var(--s0) 0 var(--s1);white-space:pre-line;max-height:6em;overflow:auto}
.mod__answers{list-style:none;font-size:var(--t4);margin:0 0 var(--s1)}
.mod__answers li{margin-bottom:var(--s0)}
.mod__notes{list-style:none;font-size:var(--t4);margin:0 0 var(--s1);padding-left:var(--s2);border-left:var(--hair) solid var(--rule)}
.mod__notes li{margin-bottom:var(--s0)}
.mod__notes .actions{display:inline-flex;gap:var(--s1)}
.mod .actions{font-size:var(--t4)}
.mod .move label{margin-right:var(--s1)}
.wipe input[type=text]{width:8em}
.log table{width:100%;border-collapse:collapse;font-size:var(--t4)}
.log td{padding:var(--s0) var(--s2) var(--s0) 0;border-top:var(--hair) solid var(--rule);vertical-align:top}
.log td:first-child{white-space:nowrap;color:var(--dim)}

input::placeholder{color:var(--faint);opacity:1}