:root {
  --bg: #ffffff;
  --ink: #000000;
  --mute: #8c8c8c;
  --font: "Courier New", Courier, monospace;
  --w: 800px;
  --pad: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 56px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 12px; line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}
::selection { background: var(--ink); color: var(--bg); }
button, input, textarea { font-family: var(--font); }
a { color: inherit; text-decoration: none; }
a:hover, button:hover { color: var(--mute); }
a:focus-visible, button:focus-visible { outline: 1px dashed var(--ink); outline-offset: 3px; }
h1, h2 { font-size: 12px; font-weight: normal; margin: 0; text-transform: uppercase; letter-spacing: .1em; }
p { margin: 0; }
img { display: block; max-width: 100%; }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  text-align: center; padding: 20px var(--pad) 16px;
  text-transform: uppercase; letter-spacing: .1em; font-size: 11px;
}
.site-header a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.site-header a[aria-current="true"] { text-decoration: underline; text-underline-offset: 4px; }

main { padding: 0 var(--pad); }
.intro { text-align: center; color: var(--mute); margin: 72px auto 96px; font-size: 11px; letter-spacing: .04em; }

/* initials logo (top of homepage) */
a.logo { display: block; width: fit-content; margin: 56px auto 0; }
a.logo img { display: block; height: 32px; width: auto; max-width: 100%; filter: grayscale(1) brightness(0); }
a.logo:hover img { opacity: .6; }
a.logo + .intro { margin-top: 28px; }

/* projects */
.project { max-width: var(--w); margin: 0 auto 140px; }
.previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.previews.one { grid-template-columns: minmax(0, calc(var(--w) / 2 - 6px)); justify-content: center; }
.pv { padding: 0; border: 0; background: none; cursor: zoom-in; }
.pv img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pv:hover img { opacity: .9; }

.credits { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 14px; font-size: 11px; line-height: 1.7; }
.credits .c2 { text-align: center; }
.credits .c3 { text-align: right; }
.credits .title { color: var(--ink); }
.credits .title a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.credits .mute { color: var(--mute); }
.credits .more { display: inline-block; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.credits .more:hover { color: var(--ink); }

.pubs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 12px; font-size: 11px; color: var(--mute); }
.pubs .wordmark { letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.pubs img.logo { height: 13px; width: auto; filter: grayscale(1) brightness(0); }

/* info / contact: label left, text right */
#info, #contact { max-width: var(--w); margin: 0 auto 120px; display: grid; grid-template-columns: 25% 1fr; column-gap: 24px; }
#info h2, #contact h2 { grid-column: 1; grid-row: 1 / span 6; color: var(--mute); }
#info p, #contact p { grid-column: 2; max-width: 460px; margin-bottom: 1em; }
#contact { margin-bottom: 96px; }
#contact a { text-decoration: underline; text-underline-offset: 4px; }
#contact a:hover { text-decoration-style: dashed; }

/* project detail */
#detail[hidden], #home[hidden] { display: none; }
#detail { max-width: 600px; margin: 72px auto 80px; text-align: center; }
#detail h1 { margin-bottom: 14px; }
#detail .meta, #detail .desc { color: var(--mute); font-size: 11px; }
#detail .pubs { margin-top: 12px; }
#detail .gallery { margin-top: 64px; display: grid; gap: 48px; }
#detail .shot { padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
#detail .shot img { width: 100%; height: auto; }
#detail .shot:hover img { opacity: .9; }
#detail .back { display: inline-block; margin-top: 80px; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }

.site-footer { text-align: center; color: var(--mute); font-size: 11px; padding: 0 var(--pad) 40px; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 20; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: calc(100% - 160px); max-height: calc(100% - 110px); object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; color: var(--ink); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; padding: 12px; cursor: pointer; }
.lightbox button:hover { color: var(--mute); }
.lb-close { top: 10px; right: 10px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--mute); }

@media (max-width: 700px) {
  :root { --pad: 16px; }
  .intro { margin: 48px auto 64px; }
  .project { margin-bottom: 96px; }
  .previews { gap: 6px; }
  .credits { grid-template-columns: 1fr; gap: 6px; text-align: center; }
  .credits .c3 { text-align: center; }
  #info, #contact { display: block; margin-bottom: 88px; }
  #info h2, #contact h2 { margin-bottom: 18px; text-align: center; }
  #info p, #contact p { max-width: none; }
  #contact p { text-align: center; }
  .lightbox img { max-width: 100%; max-height: calc(100% - 130px); }
  .lb-prev, .lb-next { top: auto; bottom: 6px; transform: none; }
  .lb-prev { left: 12px; } .lb-next { right: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.pubs .label { flex-basis: 100%; text-align: center; }
#detail .pubs .label { flex-basis: auto; }
@media (max-width: 700px) {
  .credits .c2 { width: 100%; }
  .pubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 0; justify-items: center; align-items: center; }
  .pubs .label { grid-column: 1 / -1; margin: 0; line-height: 1.3; }
  .pubs img.logo { width: auto; max-width: 90%; object-fit: contain; }
}

/* single / no-label publication logos */
.pubs.nolabel { margin-top: 8px; }

/* film */
.film-frame { aspect-ratio: 16 / 9; background: #f2f2f2; }
.film-frame video, .film-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #f2f2f2; object-fit: contain; }
.film .credits .c2 a, .film-credits a { text-decoration: underline; text-underline-offset: 3px; }
.film .credits .c2 a:hover, .film-credits a:hover { color: var(--ink); }
.film-credits { margin-top: 32px; font-size: 11px; line-height: 1.7; }
.film-credits summary { cursor: pointer; list-style: none; text-align: center; text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.film-credits summary::-webkit-details-marker { display: none; }
.film-credits summary::after { content: " +"; }
.film-credits[open] summary::after { content: " -"; }
.film-credits summary:hover { color: var(--ink); }
.cg { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 2px; margin-top: 22px; }
.cg .role { text-align: right; color: var(--mute); }
.cg .who { text-align: left; overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .pubs.n1 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; }
  .pubs.n2 { grid-template-columns: repeat(2, 1fr); }
}

/* image fade-in */
img.pre { opacity: 0; }
img.show { animation: imgfade 1.1s ease; }
@keyframes imgfade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { img.pre { opacity: 1; } img.show { animation: none; } }

/* footer */
.site-footer p + p { margin-top: 4px; }
.site-footer a:hover { color: var(--ink); }

/* legal pages */
.legal-page { max-width: 560px; margin: 72px auto 120px; font-size: 12px; }
.legal-page h1 { margin-bottom: 40px; }
.legal-page h2 { margin: 36px 0 10px; color: var(--mute); }
.legal-page p { margin-bottom: 1em; }
.legal-page a { text-decoration: underline; text-underline-offset: 3px; }
.legal-page a:hover { color: var(--mute); }